如何在datatable中的鼠标悬停时显示图像预览

<table id="myTable">
  <thead>
    <tr>
      <th>图像</th>
      <th>名称</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据行 -->
  </tbody>
</table>

$(document).ready(function() {
  $('#myTable').DataTable({
    // DataTable配置选项
    columnDefs: [
      {
        targets: 0, // 图像列的索引
        render: function(data, type, row, meta) {
          // 在图像单元格中添加自定义属性data-image，存储图像URL
          return '<img src="' + data + '" data-image="' + data + '" width="50" height="50">';
        }
      }
    ],
    // 鼠标悬停事件处理函数
    drawCallback: function() {
      $('#myTable tbody tr').hover(
        function() {
          var imageUrl = $(this).find('img').data('image');
          // 在鼠标悬停时显示图像预览
          showImagePreview(imageUrl);
        },
        function() {
          // 鼠标离开时隐藏图像预览
          hideImagePreview();
        }
      );
    }
  });

  // 显示图像预览的函数
  function showImagePreview(imageUrl) {
    // 创建一个图像预览元素，并设置其位置和样式
    var previewElement = $('<div id="imagePreview"><img src="' + imageUrl + '"></div>');
    previewElement.css({
      position: 'absolute',
      top: event.pageY + 10,
      left: event.pageX + 10,
      border: '1px solid #ccc',
      padding: '5px',
      backgroundColor: '#fff'
    });
    // 将图像预览元素添加到页面中
    $('body').append(previewElement);
  }

  // 隐藏图像预览的函数
  function hideImagePreview() {
    // 移除图像预览元素
    $('#imagePreview').remove();
  }
});