如何通过单击“清除”按钮清除筛选器后刷新数据表表

Question

I have modified the dataTables filter input into a Jquery Mobile search filter , which also inlcudes a delete button, to clear the input field.

This only works half-way, because when I click delete, the input field clears BUT the tables does not update.

So I'm looking for some hints on how to refresh the table when clicking on my custom delete button inside the _fnFeatureHtmlFilter function?

The below code shows how I set up the JQM search. Don't think it's helpful for answering the question though...

    /* jqm search input */
    sSearchStr = oSettings.oInit.bJQueryMobileUI == true ? '<input placeholder="Filtern" data-type="search" data-theme="'+DataTable.ext.oJQMthemes.wrapperTheme+'" />' : 
         ( (sSearchStr.indexOf('_INPUT_') !== -1) ?
             sSearchStr.replace('_INPUT_', '<input type="text" />') :
                sSearchStr==="" ? '<input type="text" />' : sSearchStr+' <input type="text" />' );
    var nFilter = document.createElement( 'div' );
    /* jqm wrapper classes */
    nFilter.className = oSettings.oInit.bJQueryMobileUI == true ? "ui-block-c "+oSettings.oClasses.sFilter : oSettings.oClasses.sFilter;
    oSettings.oInit.bJQueryMobileUI == true ? $(nFilter).html(sSearchStr) : $(nFilter).html('<label>'+sSearchStr+'</label>');

Thanks for some tips!

Answer 1

Found a solution:

 $('.dataTables_filter .ui-input-clear').live('click', function(e) {    
      jqFilter.val("");
      jqFilter.trigger('keyup.DT');
      });

This binds to the clear button. So when it's clicked I'm setting the input value to "" manually, because the JQM clear button doesn't seem to really clear the input itself.

With my cleared input I trigger a keyup on the input. This will fire the normal dataTables rountine, which will fire the fnFilter function, because now jqFilter.value does not match the previous search term. Because jqFilter is empty fnFilter will show the whole table again.

Maybe useful for somebody else, too.

Answer 2

You can programatically clear the filter by asking the DataTables API to search for empty string:

$('#myTable').dataTable().fnFilter('');

or if you already have an object reference:

oMyTable.fnFilter('');