it-swarm.cn

检测数据表上的页面更改

使用 DataTable 我可以命令,列出,进行分页,但是我想检测一下分页何时发生变化,我已经看到了 [〜#〜] api [〜#〜] 但我唯一能做的就是更改页面,但无法检测到此更改。

35
Felix

当单击next时,可以使用 fnDrawCallbackfnInfoCallback 来检测更改。被解雇。

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

40
nimcap

分页事件是通过这种方式处理的,

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

28
duvanjamid

我使用它来工作:

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

如果您的版本大于1.8,则可以使用它来进行页面更改事件:

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

希望这可以帮助!

更新:

一些评论指出,使用.live()代替.on()对他们有效。请注意,您应该同时尝试这两种方法,然后看看哪种方法在您的特定情况下效果最好! (我相信这可能与您在jQuery上的版本有关,但是如果您发现其他原因,请发表评论!)

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

就我而言,“ 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
});
4
César León

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

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

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

3
CSSian

这个工作不错

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

尝试使用委托代替live:

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

当我单击下一步时,这可以滚动到我

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