jQuery 检测数据表上的页面更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7407111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect page change on DataTable
提问by Felix
回答by nimcap
You may use fnDrawCallbackor fnInfoCallbackto detect changes, when nextis clicked both of them are fired.
您可以使用fnDrawCallback或fnInfoCallback来检测更改，当单击下一步时，它们都会被触发。
But beware, page changes are not the only source that can fire those callbacks.
但请注意，页面更改并不是触发这些回调的唯一来源。
回答by duvanjamid
Paging events are handled in this way,
分页事件是这样处理的，
$(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();
} );
documented in the official website, here http://www.datatables.net/examples/advanced_init/dt_events.html
官方网站中记录，这里http://www.datatables.net/examples/advanced_init/dt_events.html
The length.dt event is fired whenever the table's page length is changed
每当表的页面长度发生变化时，就会触发 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/length
More events here
更多活动在这里
datatables.net/reference/event/
datatables.net/reference/event/
回答by Alvin Bakker
I got it working using:
我使用它工作：
$('#id-of-table').on('draw.dt', function() {
// do action here
});
回答by streetlight
IF you have a version greater than 1.8, you can use this to hit the page change events:
如果您的版本大于 1.8，则可以使用它来触发页面更改事件：
$('#myTable').on('page', function () {...} );
Hope this helps!
希望这可以帮助！
UPDATE:
更新：
Some comments have pointed out that using .live() instead of .on() worked for them. Be aware of that you should try both and see which one works best in your particular circumstance! (I believe this may have to do with your version on jQuery, but please comment if you find another reason!)
一些评论指出使用 .live() 而不是 .on() 对他们有用。请注意，您应该同时尝试这两种方法，看看哪一种最适合您的特定情况！（我相信这可能与您在 jQuery 上的版本有关，但如果您发现其他原因，请发表评论！）
回答by Satish Pokala
$('#tableId').on('draw.dt', function() {
//This will get called when data table data gets redrawn to the table.
});
回答by César León
In my case, the 'page.dt' event did not do the trick.
就我而言，'page.dt' 事件没有解决问题。
I used 'draw.dt' event instead, and it works!, some code:
我改用'draw.dt'事件，它有效！，一些代码：
$(document).on('draw.dt', function () {
//Do something
});
'Draw.dt' event is fired everytime the datatable page change by searching, ordering or page changing.
'Draw.dt' 事件在每次通过搜索、排序或页面更改更改数据表页面时被触发。
/***** Aditional Info *****/
/***** 附加信息 *****/
There are some diferences in the way we can declare the event listener. You can asign it to the 'document' or to a 'html object'. The 'document' listeners will always exist in the page and the 'html object' listener will exist only if the object exist in the DOM in the moment of the declaration. Some code:
我们声明事件监听器的方式有一些不同。您可以将其分配给“文档”或“html 对象”。“文档”侦听器将始终存在于页面中，“html 对象”侦听器仅在声明时对象存在于 DOM 中时才存在。一些代码：
//Document event listener
//文档事件监听器
$(document).on('draw.dt', function () {
//This will also work with objects loaded by ajax calls
});
//HTML object event listener
//HTML 对象事件监听器
$("#some-id").on('draw.dt', function () {
//This will work with existing objects only
});
回答by Kemal Cankurt
This working good
这工作很好
$('#id-of-table').on('draw.dt', function() {
// do action here
});
回答by CSSian
An alternative approach would be to register an event handler on the pagination link like so:
另一种方法是在分页链接上注册一个事件处理程序，如下所示：
$("#dataTableID_paginate").on("click", "a", function() { alert("clicked") });
Replace "#dataTableID_" with the ID of your table, of course. And I'm using JQuery's ON method as that is the current best practice.
当然，将“#dataTableID_”替换为您的表的 ID。我正在使用 JQuery 的 ON 方法，因为这是当前的最佳实践。
回答by nirmallimbu
Try using delegate instead of live as here:
尝试使用委托而不是现场直播：
$('#link-wrapper').delegate('a', 'click', function() {
// do something ..
}
回答by hanna jebesa
This works form me to scroll to when I click next
当我单击下一步时，这可以让我滚动到
$('#myTable').on('draw.dt', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
