Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to catch an event on pagination buttons next/previous of the DataTables

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

like image 346
Jurgen Avatar asked Feb 10 '17 14:02

Jurgen


People also ask

How does DataTables pagination work?

DataTables can split the rows in tables into individual pages, which is an efficient method of showing a large number of records in a small space. The end user is provided with controls to request the display of different data as the navigate through the data.

How do you remove pagination from a table?

You can add data-paging='false' to the <table> element and pagination will be disabled for that table. Save this answer. Show activity on this post. Here is an alternative that is an incremental improvement on several other answers.


1 Answers

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.

like image 115
Gyrocode.com Avatar answered Sep 21 '22 06:09

Gyrocode.com