如何在清除过滤器之后通过点击“;清除“;按钮

how to refresh a datatables table after clearing the filter by clicking on a "clear" button

本文关键字：清除 按钮 过滤器 之后      更新时间：2023-09-26

我已经将dataTables过滤器输入修改为Jquery Mobile搜索过滤器，该过滤器还包含一个删除按钮，以清除输入字段。

这只起到一半的作用，因为当我单击删除时，输入字段会清除，但表不会更新。

因此，我正在寻找一些提示，说明在_fnFeatureHtmlFilter函数内单击自定义删除按钮时如何刷新表？

下面的代码显示了我如何设置JQM搜索。不过，不要认为这对回答问题有帮助。。。

    /* 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>');

谢谢你的建议！

找到了一个解决方案：

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

这绑定到清除按钮。因此，当点击它时，我会手动将输入值设置为"，因为JQM清除按钮似乎并没有真正清除输入本身。

当我的输入被清除时，我会在输入上触发一个按键。这将触发普通的dataTables rountine，它将触发fnFilter函数，因为现在jqFilter.value与以前的搜索项不匹配。因为jqFilter为空fnFilter将再次显示整个表。

也许对其他人也有用。

您可以通过要求DataTables API搜索空字符串以编程方式清除过滤器：

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

或者如果你已经有一个对象引用：

oMyTable.fnFilter('');

相关文章：