如何捕获数据表的下一个/上一个分页按钮上的事件

Question

任何人都可以向我展示如何捕获数据表的下一个/上一个分页按钮上的事件的示例吗？ 我特别对“下一步”按钮感兴趣。如果您有一个如何捕获特定分页按钮事件的示例，那对我真的很有帮助。

我在数据表中进行了搜索，发现要捕获事件，你应该使用这个：

$('#example').on('page.dt', function ()).DataTable();

但这会捕获所有分页按钮的事件。我想知道如何针对特定的情况执行此操作（在我的情况下为“下一个”）。

提前致谢

Answer 1

使用下面的代码将单击事件处理程序附加到“下一步”分页按钮。

var table = $('#example').DataTable({
   drawCallback: function(){
      $('.paginate_button.next:not(.disabled)', this.api().table().container())          
         .on('click', function(){
            alert('next');
         });       
   }
});   

请参阅 this jsFiddle 获取代码和演示。

Answer 2

  drawCallback: function () {
var table = this.api();
var pageInfo = table.page.info();

$('.paginate_button.next:not(.disabled)', table.table().container())
    .on('click', function () {
        var nextPageIndex = pageInfo.page ;
        alert('Next page index: ' + nextPageIndex);
    });

// Event handler for page number buttons
$('.paginate_button:not(.next, .previous)', table.table().container())
    .on('click', function () {
        var clickedPageIndex = $(this).text() - 1; // Adjust to zero-based index
        alert('Clicked page index: ' + clickedPageIndex);
    });

// Event handler for the "Previous" button
$('.paginate_button.previous:not(.disabled)', table.table().container())
    .on('click', function () {
        var previousPageIndex = pageInfo.page - 1;
        alert('Previous page index: ' + previousPageIndex);
    });

},