Can anybody show me an example of how to catch the events on pagination buttons next/previous of datatables? In particular I'm interested for the "next" button. It would really help me if you have an example of how to catch the event of a particular pagination button.

I have searched and in datatable and found that to catch an event you should use this :

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

But this catches the events for all the pagination buttons. I want to know how to do it for a particular one("next" in my case).

Thanks in advance

Can anybody show me an example of how to catch the events on pagination buttons next/previous of datatables? In particular I'm interested for the "next" button. It would really help me if you have an example of how to catch the event of a particular pagination button.

I have searched and in datatable and found that to catch an event you should use this :

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

But this catches the events for all the pagination buttons. I want to know how to do it for a particular one("next" in my case).

Thanks in advance

• javascript
• jquery
• pagination
• datatables

2 Answers 2

Use the code below to attach click event handler to "Next" pagination button.

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

See this jsFiddle for code and demonstration.

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