Question

使用DataTable我可以订购，列出，分页，但我想检测分页何时更改，我看到了API，但我唯一能做的就是更改页面但不是检测到这种变化。

Answer 1

您可以使用fnDrawCallback或fnInfoCallback来检测更改，当点击下一个时，两个都会被触发。

但要注意，页面更改不是唯一可以触发这些回调的源。

Answer 2

以这种方式处理寻呼事件，

 $(document).ready(function() {

    $('#example')
        .on( 'order.dt',  function () { console.log('Order' ); } )
        .on( 'search.dt', function () {console.log('Search' ); } )
        .on( 'page.dt',   function () { console.log('Page' ); } )
        .dataTable();
} );

在官方网站上记录，http://www.datatables.net/examples/advanced_init/dt_events.html

只要表格的页面长度发生变化，就会触发length.dt事件

$('#example').dataTable();

$('#example').on( 'length.dt', function ( e, settings, len ) {
    console.log( 'New page length: '+len );
} );

http://datatables.net/reference/event/length

此处有更多活动

datatables.net/reference/event /

Answer 3

我使用了它：

$('#id-of-table').on('draw.dt', function() {
    // do action here
});

Answer 4

如果你的版本大于1.8，你可以用它来点击页面更改事件：

    $('#myTable').on('page', function () {...} );

希望这有帮助！

<强>更新

有些评论指出，使用.live（）代替.on（）可以为它们工作。请注意，您应该尝试两者，看看哪一种在您的特定环境中效果最好！（我相信这可能与您在jQuery上的版本有关，但如果您找到其他原因请发表评论！）

Answer 5

$('#tableId').on('draw.dt', function() {
    //This will get called when data table data gets redrawn to the      table.
});

Answer 6

另一种方法是在分页链接上注册事件处理程序，如下所示：

$("#dataTableID_paginate").on("click", "a", function() { alert("clicked") });

当然，用表的ID替换“#dataTableID_”。我正在使用JQuery的ON方法，因为这是目前的最佳实践。

Answer 7

就我而言，'page.dt'事件没有解决问题。

我改用了'draw.dt'事件，它有效！，一些代码：

$(document).on('draw.dt', function () {
    //Do something
});

每次通过搜索，排序或页面更改来更改数据表页面时，都会触发“ Draw.dt”事件。

/ *****附加信息***** /

在声明事件侦听器的方式上存在一些差异。您可以将其分配给“文档”或“ html对象”。 “文档”侦听器将始终存在于页面中，而“ html对象”侦听器仅在声明时在DOM中存在该对象的情况下存在。一些代码：

//文档事件监听器

$(document).on('draw.dt', function () {
    //This will also work with objects loaded by ajax calls
});

// HTML对象事件侦听器

$("#some-id").on('draw.dt', function () {
    //This will work with existing objects only
});

Answer 8

尝试使用委托代替现场：

$('#link-wrapper').delegate('a', 'click', function() {
  // do something ..
}

Answer 9

这个工作好的

$('#id-of-table').on('draw.dt', function() {
    // do action here
});

Answer 10

当我点击下一个

时，这可以让我滚动到

$('#myTable').on('draw.dt', function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
});

Answer 11

如果在page.dt之后处理draw.dt事件，则可以在移动页面后准确地进行检测。下班后，必须将draw.dt解除绑定

    $(document).on("page.dt", () => {
        $(document).on("draw.dt", changePage);
    });

    const changePage = () => {
        // TODO
        $(document).unbind("draw.dt", changePage);
    }

Answer 12

我在API中没有找到任何内容，但您可以做的一件事是将事件处理程序附加到标准分页器并检测它是否已更改：

$('.dataTables_length select').live('change', function(){
       alert(this.value);
    });

检测DataTable上的页面更改

12 个答案: