通过单击“清除”按钮清除过滤器后如何刷新数据表答案

【问题标题】：how to refresh a datatables table after clearing the filter by clicking on a "clear" button通过单击“清除”按钮清除过滤器后如何刷新数据表
【发布时间】：2012-03-14 00:17:28
【问题描述】：

我已将dataTables 过滤器输入修改为Jquery Mobile search filter，其中还包含一个删除按钮，用于清除输入字段。

这只是中途，因为当我单击删除时，输入字段会清除但表格不会更新。

所以我正在寻找一些关于如何在单击 _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>');

感谢您的一些提示！

【问题讨论】：

标签： javascript jquery jquery-mobile filter datatables

【解决方案1】：

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

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

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

oMyTable.fnFilter('');

【讨论】：

感谢所有贡献者，但实际上我发现这个答案更简洁明了。

【解决方案2】：

找到解决办法：

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

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

使用我清除的输入，我在输入上触发了一个按键。这将触发正常的 dataTables 例程，这将触发 fnFilter 函数，因为现在 jqFilter.value 与之前的搜索词不匹配。因为 jqFilter 为空 fnFilter 会再次显示整个表格。

也许对其他人也有用。

【讨论】：

太有用了。我不敢相信，但是是的。谢谢你！可惜datatables插件没有优雅的方式通过JS控制搜索/过滤。