Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery DataTables: Delay search until 3 characters been typed OR a button clicked

Is there please an option to start the search only after 3 characters have been typed in?

I have written a PHP-script for colleagues displaying 20,000 entries and they complain, that when typing a word, the first few letters cause everything to freeze.

An alternative would be to have the search to be started by a button clicked and not by character typing.

Below is my current code:

$("#my_table").dataTable( {         "bJQueryUI": true,         "sPaginationType": "full_numbers",         "bAutoWidth": false,         "aoColumns": [                 /* qdatetime */   { "bSearchable": false },                 /* id */          null,                 /* name */        null,                 /* category */    null,                 /* appsversion */ null,                 /* osversion */   null,                 /* details */     { "bVisible": false },                 /* devinfo */     { "bVisible": false, "bSortable": false }         ],         "oLanguage": {                 "sProcessing":   "Wait please...",                 "sZeroRecords":  "No ids found.",                 "sInfo":         "Ids from _START_ to _END_ of _TOTAL_ total",                 "sInfoEmpty":    "Ids from 0 to 0 of 0 total",                 "sInfoFiltered": "(filtered from _MAX_ total)",                 "sInfoPostFix":  "",                 "sSearch":       "Search:",                 "sUrl":          "",                 "oPaginate": {                         "sFirst":    "&lt;&lt;",                         "sLast":     "&gt;&gt;",                         "sNext":     "&gt;",                         "sPrevious": "&lt;"                 },                 "sLengthMenu": 'Display <select>' +                         '<option value="10">10</option>' +                         '<option value="20">20</option>' +                         '<option value="50">50</option>' +                         '<option value="100">100</option>' +                         '<option value="-1">all</option>' +                         '</select> ids'         } } ); 
like image 992
Alexander Farber Avatar asked Apr 05 '11 07:04

Alexander Farber


1 Answers

Solution for version 1.10 -

After looking here for a complete answer and not finding one, I've written this (utilizing code from the documentation, and a few answers here).

The below code works to delay searching until at least 3 characters are entered:

// Call datatables, and return the API to the variable for use in our code // Binds datatables to all elements with a class of datatable var dtable = $(".datatable").dataTable().api();  // Grab the datatables input box and alter how it is bound to events $(".dataTables_filter input")     .unbind() // Unbind previous default bindings     .bind("input", function(e) { // Bind our desired behavior         // If the length is 3 or more characters, or the user pressed ENTER, search         if(this.value.length >= 3 || e.keyCode == 13) {             // Call the API search function             dtable.search(this.value).draw();         }         // Ensure we clear the search if they backspace far enough         if(this.value == "") {             dtable.search("").draw();         }         return;     }); 
like image 162
random_user_name Avatar answered Sep 21 '22 03:09

random_user_name