How to update datatables table after filter cleaning by clicking the "Clear" button

Question

I changed the input of the dataTables filter in the Jquery Mobile search filter , which also includes a delete button to clear the input field.

This only works halfway, because when I click delete, the input field is cleared, but the tables are not updated.

So I'm looking for some tips on how to update a table when I click on my custom delete button inside the _fnFeatureHtmlFilter function?

The code below shows how I configured JQM search. Do not think this is useful for answering a 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 the tips!

Answer 1

Found a solution:

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

This is due to the clear button. So when he clicked, I set the input value "" manually because the JQM clear button does not seem to really clear the input itself.

With my cleared input, I launch the input keyboard. This will launch the regular rountine dataTables, which will run the fnFilter function, because now jqFilter.value does not match the previous search query. Since jqFilter is empty, fnFilter will display the entire table again.

Maybe useful for someone else.

Answer 2

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

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

or if you already have an object reference:

oMyTable.fnFilter('');