Clear search filter

liedekef

Hi,

based on what I found here: http://datatables.net/forums/discussion/11693/submitting-clear-search-field-button-plugin/p1
I created the following code to make it work for 1.10 and clear the search input field (and it seems to be working):

[code]
jQuery.fn.dataTableExt.oApi.clearSearch = function ( oSettings )
{

var table = this;

var clearSearch = jQuery('');
jQuery(clearSearch).click( function ()
{
table.fnFilter('');
jQuery('input[type=search]').val('');
});
jQuery(oSettings.nTableWrapper).find('div.dataTables_filter').append(clearSearch);
jQuery(oSettings.nTableWrapper).find('div.dataTables_filter label').css('margin-right', '-16px');//16px the image width
jQuery(oSettings.nTableWrapper).find('div.dataTables_filter input').css('padding-right', '16px');
}

//auto-execute, no code needs to be added
jQuery.fn.dataTable.models.oSettings['aoInitComplete'].push( {
"fn": jQuery.fn.dataTableExt.oApi.clearSearch,
"sName": 'whatever'
} );

[/code]

But after also reading http://next.datatables.net/plug-ins/api/fnFilterClear (and what it says for 1.10), I'm wondering if this is the correct method of doing this?

liedekef

I'm sorry, I used "jQuery", which in the datatables way should just be "$", so here the revised code:
[code]
$.fn.dataTableExt.oApi.clearSearch = function ( oSettings )
{

var table = this;

var clearSearch = $('');
$(clearSearch).click( function ()
{
table.fnFilter('');
$('input[type=search]').val('');
});
$(oSettings.nTableWrapper).find('div.dataTables_filter').append(clearSearch);
$(oSettings.nTableWrapper).find('div.dataTables_filter label').css('margin-right', '-16px');//16px the image width
$(oSettings.nTableWrapper).find('div.dataTables_filter input').css('padding-right', '16px');
}

//auto-execute, no code needs to be added
$.fn.dataTable.models.oSettings['aoInitComplete'].push( {
"fn": $.fn.dataTableExt.oApi.clearSearch,
"sName": 'whatever'
} );
[/code]

allan

Hi,

There is no one "right" way of doing these things - your solution looks absolutely fine! The one issue with the 1.10 code in the plug-in page you link to, and what your own plug-in appears to address, is that DataTables has no external control over the column input filters. So also my 1.10 code on the page will clear the filters internally, it won't clear the visual inputs that the user sees (since DataTables doesn't know about them!). I should perhaps point that out in the code...

Allan