Datatable global search throwing random ajax error

Question

I have 2 pages with 3 and 4 datatables on them respectively.

I have a requirement to replace the default search field for each datatable with one global search field.

So far, I have implemented this perfectly, I have a global search box and hide individual search boxes like this:

//Other JS to initialise datatables with Ajax serverside processing

$(".dataTables_filter").hide();

$("#datatable-search").keyup(function() {
    $(".dataTable").DataTable().search($(this).val()).draw();
});

Numeric data uses ajax calls to load server information.

When it was just one datatable, I didn’t have this problem, but when I search all datatables globally, I get a random ajax error - caused by the 500 server side of the error. Using the developer tool console, I see which calls fail, but then I can open and run them only later.

Laravel Laravel, :

[2017-11-06 00:03:50] production.ERROR: .

, .env, . , , , - , , , ...

, backspace.

, . , - , .

, keyup , UX.

? " " ajax?

Answer 1

.

// Typing timeout
var typingTimeout = null;
// On keyup
$("#datatable-search").keyup(function() {
    // Clear previous timer
    clearTimeout(typingTimeout);
    // Set a new timer
    var that = this;
    typingTimeout = setTimeout(function(){
        $(".dataTable").DataTable().search($(that).val()).draw();
    }, 200); // Execute the search if user paused for 200 ms
});

: ​​ .