DataTables 服务器端搜索输入

Posted 2023-05-07

【中文标题】DataTables 服务器端搜索输入

【英文标题】：DataTables server side search on enter

【发布时间】：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;
    );
);

【参考方案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: ...