[jquery] Detect page change on DataTable

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.

This working good

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

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/

This works form me to scroll to when I click next

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

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

Try using delegate instead of live as here:

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

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.

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

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

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

I got it working using:

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

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