DataTables filtering API example

Preamble

Filtering a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this interaction. There is a global filter, and a filter for each individual column. The global filter acts on each column.

Each filter (global or column) can be marked as a regular expression (allowing you to create very complex interactions) and as a smart filter or not. When smart filtering is enabled on a particular filter, DataTables will modify the user input string to a complex regular expression which can make filtering more intuitive.

This example allows you to "play" with the various filtering options that DataTables provides.

Live example

Target Filter text Treat as regex Use smart filter
Global filtering
Column 1
Column 2
Column 3
Column 4
Column 5
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
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function fnFilterGlobal ()
{
    $('#example').dataTable().fnFilter(
        $("#global_filter").val(),
        null,
        $("#global_regex")[0].checked,
        $("#global_smart")[0].checked
    );
}
 
function fnFilterColumn ( i )
{
    $('#example').dataTable().fnFilter(
        $("#col"+(i+1)+"_filter").val(),
        i,
        $("#col"+(i+1)+"_regex")[0].checked,
        $("#col"+(i+1)+"_smart")[0].checked
    );
}
 
$(document).ready(function() {
    $('#example').dataTable();
     
    $("#global_filter").keyup( fnFilterGlobal );
    $("#global_regex").click( fnFilterGlobal );
    $("#global_smart").click( fnFilterGlobal );
     
    $("#col1_filter").keyup( function() { fnFilterColumn( 0 ); } );
    $("#col1_regex").click(  function() { fnFilterColumn( 0 ); } );
    $("#col1_smart").click(  function() { fnFilterColumn( 0 ); } );
     
    // ... etc for the other four columns
} );

Other examples

Basic initialisation

Advanced initialisation

API

Data sources

Server-side processing

Ajax data source

Plug-ins