DataTables – 在新的请求启动时终止ajax请求
我在服务器端模式下使用DataTables 1.10.15。
我通过ajax将表单的内容传递给PHP脚本，以便搜索数据库：
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", } }); 在向/getData.php ajax请求之前，我还有一些其他js检查输入到字段中的至少3个字符。
这意味着 – 在输入3个字符后 – 每次按下一个键时都会发出一个ajax请求，因此可能存在一个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(); } }
如果新的ajax请求被创建，我怎么能杀掉之前的ajax请求，这样它们就不会以这种方式排队？ 我已阅读如何停止DataTables实例已启动的所有当前正在进行的Ajax查询？ 但解决方案是针对旧版本的DataTables，并且接受的答案对我来说似乎不起作用。
如果您使用DataTable默认提供的搜索字段，则您需要使用searchDelay选项 。 默认情况下，使用服务器端处理时，它设置为400毫秒。 但是，您有"searching": false ，因此您不能将此选项用于您的用例。
您提供自己的自定义input元素来执行搜索。 这是DataTables的完美有效使用。 但是，您应该做的不是在创建请求后中止请求，而是首先防止创建无关请求。 你应该做的是myTable.draw()你对myTable.draw()调用。在下面的例子中，我正在使用Lodash的debounce。 如果需要，您可以使用其他库中的实现。 在下面的示例中，我还修改了事件处理，以检查输入字段值是否在击键之间实际发生了更改。 你正在检查标签但这只是冰山一角。 使用箭头键也会生成键盘事件。 只需按下并释放shift键即可生成一个键盘。 下面的代码通过检查自上次笔划以来字段的值是否已更改来处理所有这些情况，如果没有更改则忽略该事件。
我输入的速度足够快，如果我在下面的示例中显示的字段中键入“我是一个小茶壶”，我只能在控制台上看到“绘图”一次。
// 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);