Question

在datatable插件中使用分页时，如何显示我的工具提示？当列中的文本太长时，我使用插件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

解

每次DataTable重绘表时，您都需要使用drawCallback来初始化工具提示。这是必需的，因为在显示第一页时DOM中不存在除{first>之外的页面的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();
      }
   });
}

LINKS

有关更多示例和详细信息，请参阅jQuery DataTables: Custom control does not work on second page and after。

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

1 个答案:

解

LINKS