Clear search filter

Clear search filter

liedekefliedekef Posts: 8Questions: 0Answers: 0
edited April 2014 in DataTables 1.10
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?

Replies

  • liedekefliedekef Posts: 8Questions: 0Answers: 0
    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]
  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    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
This discussion has been closed.