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
+ } );
+} );
+
+
+