【发布时间】：2011-11-16 10:51:14
【问题描述】：
【问题讨论】：
-
检测到页面更改是否有特定原因？
-
是的，我想将用户浏览过的页面发送到服务器。
标签： jquery pagination datatables
【发布时间】：2011-11-16 10:51:14
【问题描述】：
您可以使用fnDrawCallback 或fnInfoCallback 来检测更改，当单击下一步 时，它们都会被触发。
但请注意，页面更改并不是触发这些回调的唯一来源。
适用于 DataTables 1.10.0+
选项现在是drawCallback
【讨论】：
-
这是唯一有效的解决方案，但正如他所说，这些事件是由许多其他事情触发的，包括 fnAddData。
-
此答案已过时，请参阅下面的答案以获取较新版本
-
使用 page.dt 事件，您可以在页面更改之前处理它。如果你把你的代码放在fnDrawCallback中，它会在页面改变后执行。
分页事件就是这样处理的，
$(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/
【讨论】：
-
谢谢！我用
.on( 'page.dt', function () { console.log('Page' ); } )很好！
我让它工作了：
$('#id-of-table').on('draw.dt', function() {
// do action here
});
【讨论】：
-
请解释这段代码如何回答这个问题。这将有助于这个问题的 OP 和其他未来的搜索者。
-
Idk 还有什么要说的，因为它是每个 DataTables 的文档
-
这个解决方案非常适合我。有关“draw.dt”活动的更多信息，请访问link。
-
这对我有用，因为这被称为 在 插入新的页面行之后。使用 page.dt 在单击分页按钮后但在替换表中的新行之前调用。
-
这太棒了。非常适合我。
如果您的版本高于 1.8，您可以使用它来触发页面更改事件：
$('#myTable').on('page', function () {...} );
希望这会有所帮助！
更新：
一些 cmets 指出使用 .live() 而不是 .on() 对他们有用。请注意，您应该同时尝试两种方法，看看哪一种在您的特定情况下最有效！ （我相信这可能与您在 jQuery 上的版本有关，但如果您发现其他原因，请发表评论！）
【讨论】：
-
对您的解决方案的小更新。 .on() 方法对我不起作用。我将其更改为 .live() 并且效果很好。
-
我认为 .live() v. .on() 可能会处理您在 jQuery / DT 上的版本。我一直在使用 .on() 它对我有用。 @ScottBeeson，您的具体问题是什么？如果您要否决我的回答，请至少提供一个示例来证明它在您的特定情况下不起作用。它似乎对其他人和我自己都有效。
-
我想知道如何在第一页加载时触发相同的功能。
-
从数据表 1.10 开始，您需要命名空间 --> next.datatables.net/manual/events.
$('#tableId').on('draw.dt', function() {
//This will get called when data table data gets redrawn to the table.
});
【讨论】：
-
除了不同的评论，我看不出这与阿尔文的回答有何不同..
在我的例子中，'page.dt' 事件并没有起到作用。
我改用了 'draw.dt' 事件，它起作用了！，一些代码：
$(document).on('draw.dt', function () {
//Do something
});
'Draw.dt' 事件在每次通过搜索、排序或页面更改改变数据表页面时触发。
/***** 附加信息 *****/
我们声明事件监听器的方式有一些不同。您可以将其分配给“文档”或“html 对象”。 'document' 侦听器将始终存在于页面中，而 'html object' 侦听器仅当对象在声明时存在于 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
});
【讨论】：
这很好用
$('#id-of-table').on('draw.dt', function() {
// do action here
});
【讨论】：
另一种方法是在分页链接上注册一个事件处理程序，如下所示：
$("#dataTableID_paginate").on("click", "a", function() { alert("clicked") });
当然，将“#dataTableID_”替换为您的表的 ID。我正在使用 JQuery 的 ON 方法，因为这是当前的最佳实践。
【讨论】：
-
更具体地说，
$('#myTableId_wrapper').find('.dataTables_paginate').on('click', 'li:not(.disabled) a', function() {
尝试使用委托而不是像这里一样生活：
$('#link-wrapper').delegate('a', 'click', function() {
// do something ..
}
【讨论】：
当我点击下一步时，我可以滚动到该页面
$('#myTable').on('draw.dt', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
【讨论】：
-
感谢您提供此代码 sn-p，它可能会提供一些有限的短期帮助。一个正确的解释would greatly improve 它的长期价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。
如果在 page.dt 之后处理 draw.dt 事件，则可以在移动页面后准确检测。下班后一定要解绑draw.dt
$(document).on("page.dt", () => {
$(document).on("draw.dt", changePage);
});
const changePage = () => {
// TODO
$(document).unbind("draw.dt", changePage);
}
【讨论】：
我没有在 API 中找到任何内容，但您可以做的一件事是将事件处理程序附加到标准分页器并检测它是否已更改：
$('.dataTables_length select').live('change', function(){
alert(this.value);
});
【讨论】：