DataTables – mata las solicitudes de ajax cuando se inicia una nueva

Estoy usando DataTables 1.10.15 en modo Server Side.

Estoy pasando el contenido de un formulario a un script PHP a través de ajax para que pueda buscar en una base de datos:

var myTable = $('#myTable').DataTable( { "processing": false, "serverSide": true, "searching": false, "ajax": { "url" : "/getData.php", "data" : function ( d ) { // Search input data d.field1 = $('#field1').val(), d.field2 = $('#field2').val(), d.field3 = $('#field3').val() }, "method" : "POST", } }); 

Tengo algunos otros js que comprueban al menos 3 caracteres ingresados ​​en un campo antes de disparar la solicitud ajax a /getData.php .

Esto significa, después de que se hayan ingresado 3 caracteres, que se realiza una solicitud de ajax cada vez que se presiona una tecla, por lo que puede haber una cola de solicitudes de ajax.

 $('#primarySearch input[type="text"]').on({ "keyup": function(e) { // Ignore tab key. if (e.which != 9) { processPrimarySearch.call(this); } } }); /* Handle Primary Search */ function processPrimarySearch() { var obj = $(this), search_id = obj.attr('id'), // eg #field1 search_value = obj.val(); // eg '123-456' /* Wait until at least 3 characters have been entered, or user has cleared the input */ if (search_value.length >= 3 || (!search_value) ) { myTable.draw(); } } 

¿Cómo puedo eliminar las solicitudes de ajax anteriores siempre que se haga una nueva, para que no hagan cola de esta manera? He leído ¿Cómo puedo detener todas las consultas en curso de Ajax que la instancia de DataTables ha iniciado? pero la solución es para una versión anterior de DataTables y la respuesta aceptada no parece funcionar para mí.

Si estuviera usando el campo de búsqueda que DataTable ofrece por defecto, querría usar la opción searchDelay . De forma predeterminada, se establece en 400 ms cuando se utiliza el procesamiento del lado del servidor. Sin embargo, tiene "searching": false , por lo tanto, no puede usar esta opción para su caso de uso.

Usted proporciona su propio elemento de input personalizado para realizar búsquedas. Este es un uso perfectamente válido de DataTables. Sin embargo, lo que debe hacer no es abortar las solicitudes después de que se crean, sino evitar, en primer lugar, la creación de solicitudes extrañas. Lo que debes hacer es rebotar tus llamadas a myTable.draw() En el siguiente ejemplo, estoy usando el rebote de debounce . Podría usar una implementación de otra biblioteca si lo desea. En el siguiente ejemplo, también modifiqué el manejo de eventos para verificar si el valor del campo de entrada realmente cambió entre pulsaciones de tecla. Estabas buscando tabs pero eso es solo la punta del iceberg. El uso de las teclas de flecha también generará eventos keyup . El evento con solo presionar y soltar la tecla de mayúsculas generará una keyup . El código a continuación se ocupa de todas esas situaciones al verificar si el valor del campo ha cambiado desde el último golpe y simplemente ignorar el evento si no ha habido ningún cambio.

Escribo lo suficientemente rápido para que si escribo “Soy una pequeña tetera” en el campo que se presenta en el ejemplo a continuación, veo “dibujar” en la consola solo una vez.

 // We create a new function that will debounce calls to the draw() function. var debouncedDraw = _.debounce(function() { // myTable.draw(); console.log("drawing"); }, 500); var prev_value = undefined; /* Handle Primary Search */ function processPrimarySearch() { var obj = $(this), search_id = obj.attr('id'), // eg #field1 search_value = obj.val(); // eg '123-456' // There's been no change to the field, ignore. if (prev_value === search_value) { return; } prev_value = search_value; /* Wait until at least 3 characters have been entered, or user has cleared the input */ if (search_value.length >= 3 || (!search_value)) { debouncedDraw(); } } $('#primarySearch input[type="text"]').on("keyup", processPrimarySearch);