Example of Page Event in Datatables?

问题:

Strange question -- I'm looking for an example of how to put a 'page' event into action in a DataTables project I'm working on.

The documenation is here -- http://datatables.net/docs/DataTables/1.9.4/#page. I'm just unable to translate that into a working example to use.

To be more specific, I'm trying to run a function that reads every row, and if any of them have a specific class (created by user interaction), then remove it -- and have this happen on every page change event. I have this function written, and it works if I modify the API, but if I can somehow this to the page event described above, that would be ideal.

Thank you in advance for your help, and any tidbits of information are truly appreciated!

In addition, I'm on Datatables 1.7.6, if that helps!

回答1:

The page event is fired when you paginate the table.

$(document).ready(function(){
    var tab = $('#example').dataTable();
    tab.on('page', function( e, o) {
        // Do something when you paginate the table
   } );
});

What is blocking you?

回答2:

I found out (from the creator of Datatables on their forums), that this code below works:

$('#myTable').on('page', function () {...} );

It only works if you are on version 1.8 or greater, and for my purposes, it worked perfectly.

Also, if you need to run a function on each table load, instead of of the page event, you can use fnDrawCallback. I'm sharing this because I wish that I had this clarified a few days ago because it would have saved me hours!

回答3:

You can use this to get the fired event, included smooth scrolling:

// Datatables scroll to top when next button is clicked
var oldStart = 0;
oTable = $('#table').dataTable({
    fnDrawCallback": function (o) {
        // This function scrolls the anchor point to the top when the user clicks next. also known as 'Go to Top'
        if ( o._iDisplayStart != oldStart ) {
            alert ("Next button click");
            var targetOffset = $('#table').offset().top;
            $('html,body').animate({scrollTop: targetOffset}, 1000);
            oldStart = o._iDisplayStart;
        }
    }
});