DataTables 服务器端搜索输入答案

【问题标题】：DataTables server side search on enterDataTables 服务器端搜索输入
【发布时间】：2016-02-11 09:59:12
【问题描述】：

我在 SO 上看到了许多线程，它们展示了如何在输入时实现搜索（默认行为是每次按键后搜索），但由于某种原因，当我对 DataTables 代码进行服务器端处理时，会忽略默认行为并返回。任何人都知道如何在用户按下回车后开始搜索？

这就是我现在得到的，搜索部分代码被完全忽略（searchDelay 也没有效果——来自 DataTables 文档）

var adminRoles;

$(document).ready(function () {
    adminRoles = $('#adminRoles').dataTable({
        info: true,
        order: [[0, 'asc']],
        processing: true,
        serverSide: true,
        searchDelay: 500, //does't work
        ajax: {
            url: "@Url.Action("GetRoles","Admin")",
            type: "POST"
        },
        columnDefs: [
            { data: "Name", targets: 0 },
            { data: "KeyName", targets: 1 },
            {
                data: "Id",
                className: "text-center editDetail clickable",
                render: function (data, type, row) {
                    return '<button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil text-primary" /></button>';
                },
                sortable: false,
                searchable: false,
                targets: 2
            }
        ],
        language: {
            url: '@Url.Content(@Resource.js_DataTables_Language)'
        }
    }).api();

    $('#adminRoles_filter input').unbind().bind('keypress', function (e) {
        if (e.which == 13) {
            alert('You pressed enter!'); //doesn't get hit
            //adminRoles.search(this.value).draw();
        }
        return;
    });
});

【问题讨论】：

标签： jquery asp.net-mvc datatables

【解决方案1】：

使用initComplete 选项定义一个将在表初始化时调用的函数，并使用下面的代码在 Enter 键上进行搜索。

adminRoles = $('#adminRoles').dataTable({
   initComplete: function(){
      var api = this.api();
      $('#adminRoles_filter input')
          .off('.DT')
          .on('keyup.DT', function (e) {
              if (e.keyCode == 13) {
                  api.search(this.value).draw();
              }
          });
   },

   // ... skipped ...

});

【讨论】：

感谢您的回复，不幸的是它不起作用。搜索仍然在每次击键之后。还有其他建议吗？
谢谢 Gyrocode.com 这适用于使用服务器端处理的 1.10.10 版本。

【解决方案2】：

我想通了。问题在于语言网址。呈现 DataTables 时，它会等待语言文件被完全读取，然后才能显示。无法执行绑定和取消绑定操作，因为输入元素不存在。因此，为了反驳我已将其添加到 fnInitComplete 上，就像有人在 DataTables 论坛上建议的那样。您还需要 fnFilterOnReturn.js

jQuery.fn.dataTableExt.oApi.fnFilterOnReturn = function (oSettings) {
var _that = this;

this.each(function (i) {
    $.fn.dataTableExt.iApiIndex = i;
    var $this = this;
    var anControl = $('input', _that.fnSettings().aanFeatures.f);
    anControl
        .unbind('keyup search input')
        .bind('keypress', function (e) {
            if (e.which == 13) {
                $.fn.dataTableExt.iApiIndex = i;
                _that.fnFilter(anControl.val());
            }
        });
    return this;
});
return this;

};

代码：

        ...
        order: [[0, 'asc']],
        processing: true,
        serverSide: true,
        "fnInitComplete": function (oSettings, json) {
            adminRoles.fnFilterOnReturn();
        },
        ajax: ...

【讨论】：