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.
Target | Filter text | Treat as regex | Use smart filter |
---|---|---|---|
Global filtering | |||
Column 1 | |||
Column 2 | |||
Column 3 | |||
Column 4 | |||
Column 5 |
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
Trident | Internet Explorer 5.5 | Win 95+ | 5,5 | A |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
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 |
Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1,1 | A |
Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1,2 | A |
Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1,3 | A |
Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1,4 | A |
Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1,5 | A |
Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1,6 | A |
Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1,7 | A |
Gecko | Mozilla 1.8 | Win 98+ / OSX.1+ | 1,8 | A |
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1,8 | A |
Gecko | Epiphany 2.20 | Gnome | 1,8 | A |
Webkit | Safari 1.2 | OSX.3 | 125,5 | A |
Webkit | Safari 1.3 | OSX.3 | 312,8 | A |
Webkit | Safari 2.0 | OSX.4+ | 419,3 | A |
Webkit | Safari 3.0 | OSX.4+ | 522,1 | A |
Webkit | OmniWeb 5.5 | OSX.4+ | 420 | A |
Webkit | iPod Touch / iPhone | iPod | 420,1 | A |
Webkit | S60 | S60 | 413 | A |
Presto | Opera 7.0 | Win 95+ / OSX.1+ | - | A |
Presto | Opera 7.5 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 8.0 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 8.5 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 9.0 | Win 95+ / OSX.3+ | - | A |
Presto | Opera 9.2 | Win 88+ / OSX.3+ | - | A |
Presto | Opera 9.5 | Win 88+ / OSX.3+ | - | A |
Presto | Opera for Wii | Wii | - | A |
Presto | Nokia N800 | N800 | - | A |
Presto | Nintendo DS browser | Nintendo DS | 8,5 | C/A1 |
KHTML | Konqureror 3.1 | KDE 3.1 | 3,1 | C |
KHTML | Konqureror 3.3 | KDE 3.3 | 3,3 | A |
KHTML | Konqureror 3.5 | KDE 3.5 | 3,5 | A |
Tasman | Internet Explorer 4.5 | Mac OS 8-9 | - | X |
Tasman | Internet Explorer 5.1 | Mac OS 7.6-9 | 1 | C |
Tasman | Internet Explorer 5.2 | Mac OS 8-X | 1 | C |
Misc | NetFront 3.1 | Embedded devices | - | C |
Misc | NetFront 3.4 | Embedded devices | - | A |
Misc | Dillo 0.8 | Embedded devices | - | X |
Misc | Links | Text only | - | X |
Misc | Lynx | Text only | - | X |
Misc | IE Mobile | Windows Mobile 6 | - | C |
Misc | PSP browser | PSP | - | C |
Other browsers | All others | - | - | U |
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
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 } );