DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

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

Initialisation code

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