Detect page change on DataTable
JqueryPaginationDatatablesJquery Problem Overview
Jquery Solutions
Solution 1 - Jquery
You may use fnDrawCallback or fnInfoCallback to detect changes, when next is clicked both of them are fired.
But beware, page changes are not the only source that can fire those callbacks.
For DataTables 1.10.0+
The option is now drawCallback
Solution 2 - Jquery
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
The length.dt event is fired whenever the table's page length is changed
$('#example').dataTable();
$('#example').on( 'length.dt', function ( e, settings, len ) {
console.log( 'New page length: '+len );
} );
http://datatables.net/reference/event/length
More events here
datatables.net/reference/event/
Solution 3 - Jquery
I got it working using:
$('#id-of-table').on('draw.dt', function() {
// do action here
});
Solution 4 - Jquery
IF you have a version greater than 1.8, you can use this to hit the page change events:
$('#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!)
Solution 5 - Jquery
$('#tableId').on('draw.dt', function() {
//This will get called when data table data gets redrawn to the table.
});
Solution 6 - Jquery
In my case, the 'page.dt' event did not do the trick.
I used 'draw.dt' event instead, and it works!, some code:
$(document).on('draw.dt', function () {
//Do something
});
'Draw.dt' event is fired everytime the datatable page change by searching, ordering or page changing.
/***** 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:
//Document event listener
$(document).on('draw.dt', function () {
//This will also work with objects loaded by ajax calls
});
//HTML object event listener
$("#some-id").on('draw.dt', function () {
//This will work with existing objects only
});
Solution 7 - Jquery
This working good
$('#id-of-table').on('draw.dt', function() {
// do action here
});
Solution 8 - Jquery
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.
Solution 9 - Jquery
Try using delegate instead of live as here:
$('#link-wrapper').delegate('a', 'click', function() {
// do something ..
}
Solution 10 - Jquery
This works form me to scroll to when I click next
$('#myTable').on('draw.dt', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
Solution 11 - Jquery
If you handle the draw.dt event after page.dt, you can detect exactly after moving the page. After work, draw.dt must be unbind
$(document).on("page.dt", () => {
$(document).on("draw.dt", changePage);
});
const changePage = () => {
// TODO
$(document).unbind("draw.dt", changePage);
}
Solution 12 - Jquery
I've not found anything in the API, but one thing you could do is attach an event handler to the standard paginator and detect if it has changed:
$('.dataTables_length select').live('change', function(){
alert(this.value);
});