DataTables | events example

Preamble

DataTables can fire a number of custom events which you can bind to, allowing your code to perform custom actions when the events occured. This example shows the use of the sort, filter and page events and will add a nitofication that the event fired to an element on the page to show that they have indeed fired.

Live example

Sort event - 1741835651264
Filter event - 1741835651267
Rendering engineBrowserPlatform(s)Engine versionCSS grade
Rendering engineBrowserPlatform(s)Engine versionCSS grade
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Gecko Camino 1.0 OSX.2+ 1.8 A
Gecko Camino 1.5 OSX.3+ 1.8 A
Gecko Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Gecko Netscape Browser 8 Win 98SE+ 1.7 A
Gecko Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Gecko Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Showing 1 to 10 of 57 entries

Initialisation code

?
1
2
3
4
5
6
7
8
9
10
11
12
13
function eventFired( type ) {
    var n = document.getElementById('demo_info');
    n.innerHTML += '<:div>:'+type+' event - '+new Date().getTime()+'<:/div>:';
    n.scrollTop = n.scrollHeight;      
}
 
$(document).ready(function() {
    $('#example')
        .bind('sort',   function () { eventFired( 'Sort' ); })
        .bind('filter', function () { eventFired( 'Filter' ); })
        .bind('page',   function () { eventFired( 'Page' ); })
        .dataTable();
} );

Other examples

Basic initialisation

Advanced initialisation

API

Data sources

Server-side processing

Ajax data source

Plug-ins