工具提示不适用于数据表的分页

Tooltip does not work with pagination on datatables

本文关键字：分页 数据表 适用于 不适用 工具提示      更新时间：2023-09-26

如何在datatable插件内使用分页时显示我的工具提示?我使用插件protip与数据表连接显示工具提示，当一列内的文本太长。tooltips插件已经可以使用下面的代码片段:

//Datatable Setup
jQuery(document).ready(function($) {
var table = $('#irp-table.raab').DataTable({
    "columnDefs": [
        { visible: false, targets: 2 },
        { className: 'mdl-data-table__cell--non-numeric', targets: [0, 1]}
    ],
    "order": [[ 0, 'asc' ]],
    "displayLength": 25,
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;
        api.column(2, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="group"><td colspan="3">'+group+'</td></tr>'
                );
                last = group;
            }
        } );
    }
} );
//Initialize ToolTip
jQuery(document).ready(function($) {
$.protip();
});
//ToolTip hover behaviour
jQuery(document).ready(function($) {
$('td').bind('mouseenter', function () {
  var $this = $(this);
    if (this.offsetWidth < this.scrollWidth) {
      var text = $this.text();
      $this.attr("data-pt-title", text);
      $this.protipShow()
    }
}).mouseenter();
});

然而，它只适用于第一个网站的情况下，我使用我的数据表分页和导航到另一个网站。

SOLUTION

您需要使用drawCallback初始化工具提示每次datattables重绘表。这是必需的，因为在显示第一个页面时，除了第一个页面之外的其他页面的TR和TD元素不存在于DOM中。

也不需要调用mouseenter()。

例如:

"drawCallback": function ( settings ) {
   var api = this.api();
   // ... skipped ...
   $.protip();
   $('td', api.table().container()).on('mouseenter', function () {
      var $this = $(this);
      if (this.offsetWidth < this.scrollWidth) {
         var text = $this.text();
         $this.attr("data-pt-title", text);
         $this.protipShow();
      }
   });
}

与

参见jQuery数据表:自定义控件不工作在第二页和之后更多的例子和细节。

相关文章：