This example of how to use ColReorder shows quite a number of different interesting properties. Firstly, there is integration with ColVis, then there is the fact that there is more than one row in the table header with the second being used for the input elements, and finally of course the filtering itself. Note that it is important to use the _fnVisibleToColumnIndex() internal function to calculate which column index should be given to fnFilter (or you could employ your own methods).
Please note that this demo requires DataTables 1.8 or later.
$(document).ready(function() {
var oTable;
/* Add the events etc before DataTables hides a column */
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );
} );
/*
* 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( {
"sDom": 'RC<"clear">lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oLanguage": {
"sSearch": "Search all columns:"
},
"bSortCellsTop": true
} );
} );