FixedColumns example - individual column filtering

Preamble

This example shows a fairly complex example of FixedColumns in action. Primarily it shows how multiple rows can be used in the THEAD or TFOOT element of the table such that you can provide extra information. In this case it shows how a column filter could be implemented.

Live example

Rendering engine
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Rendering engine
BrowserEngine versionCSS grade
Firefox 1.5 1.8 A
Firefox 2.0 1.8 A
Firefox 3.0 1.9 A
Camino 1.0 1.8 A
Camino 1.5 1.8 A
Netscape 7.2 1.7 A
Netscape Browser 8 1.7 A
Netscape Navigator 9 1.8 A
Mozilla 1.0 1 A
Mozilla 1.1 1.1 A
BrowserEngine versionCSS grade
Showing 1 to 10 of 57 entries

Initialisation code

$(document).ready(function() {
	var oTable;
	
	/* Use the elements to store their own index */
	$("thead input").each( function (i) {
		this.visibleIndex = i;
	} );
	
	$("thead input").keyup( function () {
		/* If there is no visible index then we are in the cloned node */
		var visIndex = typeof this.visibleIndex == 'undefined' ? 0 : this.visibleIndex;
		
		/* Filter on the column (the index) of this element */
		oTable.fnFilter( this.value, visIndex );
	} );
	
	/*
	 * Support functions to provide a little bit of 'user friendlyness' to the textboxes
	 */
	$("thead input").each( function (i) {
		this.initVal = this.value;
	} );
	
	$("thead input").focus( function () {
		if ( this.className == "search_init" )
		{
			this.className = "";
			this.value = "";
		}
	} );
	
	$("thead input").blur( function (i) {
		if ( this.value == "" )
		{
			this.className = "search_init";
			this.value = this.initVal;
		}
	} );
	
	oTable = $('#example').dataTable( {
		"sScrollX": "100%",
		"sScrollXInner": "150%",
		"bScrollCollapse": true,
		"sDom": 'C<"clear">lfrtip',
		"aoColumnDefs": [
			{ "bVisible": false, "aTargets": [ 2 ] }
		],
		"oLanguage": {
			"sSearch": "Search all columns:"
		}
	} );
	new FixedColumns( oTable );
} );

Documentation

Basic examples

Advanced examples