DataTables individual column filtering example

Preamble

The filtering functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is global, and you (or the end user) may wish to filter only on a particular column of data. To met this need the DataTables fnFilter() API function allow you to specify a column to limit to search to. Note that this works in-combination with the global search filter. Further note that because the input elements are outside of the control of DataTables, with state saving enabled, stored values are not automatically restored - please see this post in the forum for how to do this.

The example below shows a table which has a text input box for each column in the footer element of the table. This allows the data in each column to be quickly filtered upon by the end user.

Live example

Show entries
Search all columns:
Rendering engine Browser Platform(s) Engine version CSS 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

var asInitVals = new Array();

$(document).ready(function() {
	var oTable = $('#example').dataTable( {
		"oLanguage": {
			"sSearch": "Search all columns:"
		}
	} );
	
	$("tfoot input").keyup( function () {
		/* Filter on the column (the index) of this element */
		oTable.fnFilter( this.value, $("tfoot input").index(this) );
	} );
	
	
	
	/*
	 * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
	 * the footer
	 */
	$("tfoot input").each( function (i) {
		asInitVals[i] = this.value;
	} );
	
	$("tfoot input").focus( function () {
		if ( this.className == "search_init" )
		{
			this.className = "";
			this.value = "";
		}
	} );
	
	$("tfoot input").blur( function (i) {
		if ( this.value == "" )
		{
			this.className = "search_init";
			this.value = asInitVals[$("tfoot input").index(this)];
		}
	} );
} );

Note that in the above code, the support functions are provided to ensure that the end user knows what data is being filtered upon. fnFilter() is the function of primary import here.

Other examples

Basic initialisation

Advanced initialisation

Data sources

Server-side processing

API

Plug-ins

Please refer to the DataTables documentation for full information about its API properties and methods.