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.
$(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 );
} );