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

Question

在数据表插件中使用分页时如何显示工具提示？ 当列内的文本太长时，我将插件 protip 与数据表结合使用来显示工具提示。工具提示插件已经可以使用以下代码片段:

//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();
});

但是，它仅适用于我在数据表上使用分页并导航到另一个站点的情况的第一个站点。

Answer 1

解决方案

您需要使用drawCallback每次 DataTables 重绘表格时初始化工具提示。这是必需的，因为显示第一页时，除第一页之外的页面的 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 DataTables: Custom control does not work on second page and after了解更多示例和详细信息。