如何在 Jquery 數據表中自定義搜索框過濾器

Question

我通過添加一些條件來自定義我的數據表中的搜索框過濾器。

- 如果用戶輸入超過 3 個字符並按 Enter，它將使用該值執行搜索。

- 然后，如果用戶清除搜索框輸入並且在 4 秒內沒有輸入任何字符，它將執行空值搜索。

一切正常，但仍然缺少一個條件：一些用戶開始在搜索框中輸入 sth，然后他們將其清除，因為他們取消了該搜索......因此執行空值搜索，結果將與當前視圖相同。

有些人抱怨它，因為結果包含非常大的數據，需要幾分鍾才能在服務器上運行查詢，而且他們每次都必須等待。

我想修改第二個條件：如果所有記錄都顯示在表格中，即使你輸入 sth 然后清除搜索框它不會再次繪制它，因為結果是一樣的。

我有一個想法來檢查liveTable.page.info(); 然后將recordsDisplay與recordsTotal進行比較，如果相等，則表示該表正在顯示整個數據。但我注意到recordsDisplay仍然保存以前的繪制值，因此對我沒有幫助。

請問有什么建議嗎？ 非常感謝。

 $(document).ready(function() { var liveTable = $('#example').DataTable({ }); var searchDelay = null; $(".dataTables_filter input").unbind().bind("keyup", function(e) { if(this.value.trim().length >= 3 && e.keyCode == 13) { liveTable.search(this.value.trim()).draw(); } if(this.value.trim() == "" && (e.key === "Backspace" || e.key === "Delete")) { clearTimeout(searchDelay); searchDelay = setTimeout(function() { if ($('div.dataTables_filter input').val().trim() == "") { //before this draw i need to add my new condition if table is currently showing all records then no need to draw again liveTable.search("").draw(); } }, 4000); } return; }); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <table id="example" class="table table-bordered" style="width:100%"> <thead> <tr> <th>data</th> </tr> </thead> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </tbody> </table>

Answer 1

所以我找到了一個解決方案，但我相信有一種更清潔的方法可以做到這一點。

    if($('#liveTable_info').text().includes("filtered from")) { 

    liveTable.search("").draw(); }

當表格顯示所有記錄，所以你有這樣的東西Showing 1 to xxx of xxx entries並且當表格被過濾時，頁面信息顯示Showing 1 to xxx of xxx entries (filtered from xxx total entries)

所以我檢查了顯示的信息文本是否包含filtered的單詞，這意味着我的表沒有顯示所有記錄，那么我必須再次繪制它。

我希望這對其他人有幫助