如何通過單擊「清除」按鈕清除篩選器後刷新數據表表格

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

感謝您的一些提示！

來源

2012-02-23 frequent

實測值的溶液：

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

此結合到清除按鈕。所以當它被點擊時，我將手動設置輸入值爲「」，因爲JQM清除按鈕似乎並沒有真正清除輸入本身。

用我清除的輸入，我觸發輸入上的鍵。這將觸發正常的dataTables rountine，它將觸發fnFilter函數，因爲現在jqFilter.value與前一個搜索項不匹配。由於jqFilter爲空fnFilter將再次顯示整個表格。

也許對其他人有用。

來源

2012-02-23 17:31:58 frequent

因此，該死的有用。我無法相信，但是。感謝你！數據表插件沒有一種通過JS控制搜索/過濾器的優美方式，這太糟糕了。 – 2012-02-28 01:22:35

可以編程通過詢問數據表API搜索空字符串清除過濾器：

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

，或者如果你已經有了一個對象引用：

oMyTable.fnFilter('');

來源

2014-08-25 10:39:56

感謝所有貢獻者，但我實際上發現這個答案更加簡潔和重點。 – mtchuente 2015-11-09 14:56:25

如何通過單擊「清除」按鈕清除篩選器後刷新數據表表格

回答

相關問題