检测 DataTable 上的页面更改

Question

使用 DataTable 我可以排序、列出、分页，但我想检测分页何时更改，我已经看到了 < a href="http://datatables.net/api" rel="noreferrer">API 但我唯一能做的就是更改页面，但没有检测到此更改。

Answer 1

您可以使用 fnDrawCallback 或 fnInfoCallback 来检测更改，当单击 next 时，它们都会发生被解雇了。

但请注意，页面更改并不是触发这些回调的唯一来源。

对于 DataTables 1.10.0+

该选项现在为 drawCallback

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

更多活动请点击这里

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

就我而言，“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 7

这个运作良好

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

Answer 8

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

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

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

Answer 9

尝试使用 delegate 而不是 live，如下所示：

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

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