Advanced initialisation

Posted 2020-11-18 cuteguru

1、DOM / jQuery events

$(document).ready(function() {
    var table = $(‘#example‘).DataTable();
     
    $(‘#example tbody‘).on(‘click‘, ‘tr‘, function () {
        var data = table.row( this ).data();
        alert( ‘You clicked on ‘+data[0]+‘‘s row‘ );
    } );
} );

 

2、DataTables events

DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace dt must be used), allowing your code to perform custom actions when these events occur.
All custom events fired by DataTables are fired with the namespace dt in order to prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables on() method can be used like the jQuery on() method, but will automatically append the dt namespace if required.
This example shows the use of the order, search and page events by adding a notification that the event fired to an element on the page to show that they have indeed fired.

$(document).ready(function() {
    var eventFired = function ( type ) {
        var n = $(‘#demo_info‘)[0];
        n.innerhtml += ‘<div>‘+type+‘ event - ‘+new Date().getTime()+‘</div>‘;
        n.scrollTop = n.scrollHeight;      
    }
 
    $(‘#example‘)
        .on( ‘order.dt‘,  function () { eventFired( ‘Order‘ ); } )
        .on( ‘search.dt‘, function () { eventFired( ‘Search‘ ); } )
        .on( ‘page.dt‘,   function () { eventFired( ‘Page‘ ); } )
        .DataTable();
} );