Detect page change on DataTable

Question

With DataTable I can order, list, do pagination but I want to detect when the pagination changes, I've seen the API but the only one I can do is change the page but no detect this change.

Answer 1

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

Answer 2

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

http://datatables.net/reference/event/

Answer 3

I got it working using:

$('#id-of-table').on('draw.dt', function() {
    // do action here
});

Answer 4

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!)

Answer 5

$('#tableId').on('draw.dt', function() {
    //This will get called when data table data gets redrawn to the      table.
});

Answer 6

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

Answer 7

This working good

$('#id-of-table').on('draw.dt', function() {
    // do action here
});

Answer 8

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.

Answer 9

Try using delegate instead of live as here:

$('#link-wrapper').delegate('a', 'click', function() {
  // do something ..
}

Answer 10

This works form me to scroll to when I click next

$('#myTable').on('draw.dt', function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
});

Answer 11

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

Answer 12

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