Using your own Filter field

magiconair

Hi everybody,

first I would like to thank Allan for such a great tool. What a time saver!

I was looking for a way to have my own filter field which is not embedded into the data table div as the filter field is supposed to be visible at all times and should not scroll with the table. If you set "bFilter": false then the search field disappears but you cannot filter the table anymore using dataTable.fnFilter().

The following patch for 1.7.4 adds a new option "bShowFilter" which allows to hide the filter field but keeps the filter functionality.

To enable the feature just pass bShowFilter:false into the options like this
[code]
dataTable = $("#myTable").dataTable({
"bShowFilter": false
});
[/code]
Then you can add your own search field and use it like this:
[code]
$("#myFilter").bind("keyup", function(event) {
dataTable.fnFilter($(this).val().trim());
});
[/code]

There may be better ways to do this but this had minimal impact. Maybe this is useful to other people, too.

Cheers
Frank

[code]
--- /Users/frank/Downloads/DataTables-1.7.4/media/js/jquery.dataTables.js 2010-10-30 09:18:04.000000000 +0200
+++ jquery.dataTables.js 2010-11-19 09:20:40.000000000 +0100
@@ -908,6 +908,7 @@
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
+ "bShowFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
@@ -3914,6 +3915,11 @@
var sSpace = oSettings.oLanguage.sSearch==="" ? "" : " ";
nFilter.innerHTML = oSettings.oLanguage.sSearch+sSpace+'';

+ if (!oSettings.bShowFilter)
+ {
+ nFilter.style.display = 'none';
+ }
+
var jqFilter = $("input", nFilter);
jqFilter.val( oSettings.oPreviousSearch.sSearch.replace('"','"') );
jqFilter.keyup( function(e) {
@@ -6430,6 +6436,7 @@
_fnMap( oSettings.oFeatures, oInit, "bPaginate" );
_fnMap( oSettings.oFeatures, oInit, "bLengthChange" );
_fnMap( oSettings.oFeatures, oInit, "bFilter" );
+ _fnMap( oSettings.oFeatures, oInit, "bShowFilter" );
_fnMap( oSettings.oFeatures, oInit, "bSort" );
_fnMap( oSettings.oFeatures, oInit, "bInfo" );
_fnMap( oSettings.oFeatures, oInit, "bProcessing" );
[/code]

allan

Hi Frank,

Thanks for the code modification - although there is a slightly easier way to do this :-). Just drop the 'f' option from sDom: http://datatables.net/usage/options#sDom . sDom defines where DataTables will put the various table control elements - if an option isn't included, it just isn't drawn.

Allan

magiconair

Hi Allan,

I knew that there must have been an easier way but I just didn't see it. Oh well :)

Spent some time with your code, though. Looks very clean.

Thanks for the tool and the response. Donation will come.

Frank