首页 文章

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

提问于
浏览 次
1

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

然而，它只适用于我在我的数据表上使用分页并导航到另一个站点的情况的第一个站点 .

javascript jquery pagination datatables

1 回答

  • 0

    解决方案

    每次DataTable重绘表时，您都需要使用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 .

    回复于

相关问题