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

Question

在数据表插件中使用分页时如何显示我的工具提示？ 当列内的文本太长时，我正在使用与数据表相关的插件 protip 来显​​示工具提示。 tooltips 插件已经可以与以下 sn-p 一起使用：

//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

解决方案

DataTables 每次重绘表格时都需要使用drawCallback 来初始化工具提示。这是必需的，因为在显示第一页时，DOM 中不存在除第一页以外的页面的 TR 和 TD 元素。

也不需要调用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。