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

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