如何在 Jquery 数据表中自定义搜索框过滤器

Question

I am customizing the search box filter in my datatable by adding some conditions.

-If the user enters more than 3 characters and hit Enter it will execute the search with that value.

-Then, If the user clears the search box input and doesn't type any characters in 4 seconds it will execute search with empty value.

All works fine but still missing one condition: some users start typing sth in the search box then they clear it because they cancel that search... therefore the search with empty value is executed and the result would be the same as the current view.

some complain about it as the result contains very large data and take some minutes to run the query on server and they have to wait each time.

I want to amend the second condition: If all records are displayed in the table even if you type sth then clear the search box it will not draw it again as the result would be the same.

I had an idea to check liveTable.page.info(); then compare recordsDisplay with recordsTotal if it's equal it means the table is displaying the whole data.. but I noticed that recordsDisplay still save the previous draw value so it wasn't helpful for me.

Any suggestions please? Thank you very much.

 $(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

so i found a solution but i believe there is a cleaner way to do it.

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

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

when the table is showing all records so you have sth like this Showing 1 to xxx of xxx entries and when the table is filtered then the page info shows Showing 1 to xxx of xxx entries (filtered from xxx total entries)

so i checked the displayed info text if it contains the word filtered which means that my table is not showing all records then i have to draw it again.

I hope this will be helpful for others