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.

回答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.

回答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

datatables.net/reference/event/

回答3:

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

回答4:

I got it working using:

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

回答5:

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

回答6:

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.

回答7:

Try using delegate instead of live as here:

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

回答8:

This working good

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

回答9:

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

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

回答11:

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