如果输入太快，ajax 重新加载的 DataTable 会黑屏

Question

我有一个 table，我正在使用 DataTables 并用 ajax 重新加载它。 table 是一个基本的 table:

<table class="table table-striped at-table" id="tblAccountModel">
    <thead>
           <tr>
               <th>
                   @Html.DisplayNameFor(model => model.AccountId)
               </th>
               <th>
                    @Html.DisplayNameFor(model => model.Name)
               </th>
          </tr>
       </thead>
       <tbody class="mousechange">

       </tbody>
</table>

我的 javascript 设置是：

$(function () {
    oTable = $('#tblAccountModel').DataTable({
        "serverSide": true,
        "paginate": true,
        "ajaxSource": "/Finance/AccountListAjax",
        "processing": true,
        "serverMethod": "GET",
        "displayLength": 50,
        "fnDrawCallback": function (oSettings) {
            if (20 > oSettings.fnRecordsDisplay()) {
                $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
                $(oSettings.nTableWrapper).find('.dataTables_length').hide();
            }
        }

    });

当我在搜索框中键入内容时，看起来好像每次按键后都在加载。如果我打字速度非常快，它会加载很多并且背景会变暗，如果我打字足够多，最终会变成全黑。退出模态时，背景变暗，就像模态仍然存在一样，我无法与屏幕交互。

如何防止这种情况，或者如何防止它尝试加载每个新角色？？

Answer 1

数据表搜索是由搜索输入的keyup事件触发的，所以每次按键都会向服务器发出请求。有多种方法可以修改此行为：您可以像这样取消绑定 keyup 事件：

$("div.dataTables_filter input").unbind();

并通过 return 按键触发搜索：

$("div.dataTables_filter input").keyup(function (e) {
        if (e.keyCode === 13) {
            oTable.search(this.value).draw();
        }
 });

或从表单提交事件触发搜索：

$("#form-filter").submit(function (e) {
        e.preventDefault();
        var searchTerm = $('#filter input').val();
        oTable.search(searchTerm).draw();
});

还有一个插件会添加一个'delay'，所以在输入后请求：

https://www.datatables.net/plug-ins/api/fnSetFilteringDelay

您将其附加到搜索框 keyup 事件：

var searchDelay = null;
$('div.dataTables_filter input').on('keyup', function () {
      var search = $('div.dataTables_filter input').val();

       clearTimeout(searchDelay);

       searchDelay = setTimeout(function () {
           if (search != null) {
               oTable.search(search).draw();
           }
       }, 750);
  });

如果输入太快，ajax 重新加载的 DataTable 会黑屏

DataTable with ajax reload blacks out the screen if typing too fast

ajax

jquery

datatables

reload