DataTables using the DataTables object in the initialiser example

Preamble

There are times when you may wish to call API functions inside the DataTables callback functions (for example fnInitComplete, fnRowCallback etc). The complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to something like oTable and then use oTable in the callback. However, this is catered for by the execution scope of the callback function. Here this is the DataTables object that is created for the table.

In this example you will be able to see that this.$() is used to get all nodes in the table's body and then act on them (in this case added a click event). Note also the value of this stored in the variable that so it can be used inside the jQuery click function, where the execution scope has been changed to the td element!). The action here is to apply the filter with the value of what is in each cell.

Live example

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
$(document).ready(function() {
    $('#example').dataTable( {
        "fnInitComplete": function () {
            var that = this;
            this.$('td').click( function () {
                that.fnFilter( this.innerHTML );
            } );
        }
    } );
} );

Other examples

Basic initialisation

Advanced initialisation

API

Data sources

Server-side processing

Ajax data source

Plug-ins