如何通過單擊“清除”按鈕清除篩選器后刷新數據表表

Question

我已將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>');

謝謝你的一些提示！

Answer 1

找到了解決方案：

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

這綁定到清除按鈕。 因此，當它被點擊時，我手動將輸入值設置為“”，因為JQM清除按鈕似乎並沒有真正清除輸入本身。

使用我清除的輸入，我會在輸入上觸發一個鍵盤。 這將觸發正常的dataTables rountine，它會觸發fnFilter函數，因為現在jqFilter.value與之前的搜索詞不匹配。 因為jqFilter是空的， fnFilter會再次顯示整個表。

對其他人也許有用。

Answer 2

您可以通過要求DataTables API搜索空字符串來以編程方式清除過濾器：

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

或者如果您已有對象引用：

oMyTable.fnFilter('');