Question

我有一张桌子，我正在使用DataTables并使用ajax重新加载它。该表是一个基本表：

<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事件，如下所示：

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

并从返回按键触发搜索：

$("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();
});

还有一个插件会添加一个＆＃39;延迟＆＃39;因此请求在输入后发出：

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

您附加到searchbox 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会在屏幕上显示黑屏

1 个答案: