jQuery DataTable列过滤器延迟搜索，直到3+字符或输入键

jQuery DataTable column filters with delay search until 3+ characters or enter key

本文关键字：字符 输入 直到 DataTable 过滤器 延迟 搜索 jQuery      更新时间：2023-09-26

我正在努力实现这一点，但到目前为止还不起作用。在stackoverflow或datatable论坛上尝试了这些建议，到目前为止还没有运气。我尝试了jQuery数据表的fnSetFilteringEnterPress:延迟搜索，直到3个字符输入或按钮点击，但到目前为止不能使其工作，任何建议。任何建议都会很感激。由于

var oTable;
var ws_GetData = 'Default.aspx/GetList';
$(document).ready(function () {
oTable = $('#tbl1').dataTable({
    "bJQueryUI": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "iDisplayLength": 25,
    "bProcessing": true,
    "bFilter": true,
    "bServerSide": true,
    "aoColumns": [{ "sWidth": "5%", "bSortable": false }, 
                  { "sWidth": "3%", "bSortable": false }, 
                  { "sWidth": "5%", "bSortable": false },
                  { "bSortable": false }, { "bSortable": false }, 
                  { "bSortable": false }, { "bSortable": false },
                  { "sWidth": "5%", "bSortable": false }, 
                  { "sWidth": "2%", "bSortable": false}],
    "sAjaxSource": ws_GetData,
    "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
        var page = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
        aoData.push({ "name": "pageNo_1", "value": page });
        ResultData(sSource, aoData, fnCallback);
        }
    }).columnFilter({ //sPlaceHolder: "head:before",
    aoColumns: [{ "sWidth": "5%", type: "text" },
                    { "sWidth": "3%", type: "select", values: ['00', '02'] },
                    { "sWidth": "5%", type: "text" },
                    { type: "date-range" },
                    { type: "text" },
                    { type: "text" },
                    { type: "number-range" },
                    { "sWidth": "5%", type: "text"}]
    });
}); 
function ResultData(sSource, aoData, fnCallback) {
    $.ajax({
        type: "GET",
        url: sSource,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: aoData,
        async: true,
        beforeSend: function () {
            // SHOW the overlay:
            $('#overlay').show();
        },
        complete: function () {
            // HIDE the overlay:
            $('#overlay').hide();
        },
        success: function (result) {
            var myObject = JSON.parse(result.d);
            fnCallback(myObject);
        },
        error: function (errMsg) {
            alert(errMsg);
        }
    });
}

也许这个插件可能对你有一些帮助或给你一个关于如何继续的想法:

过滤返回

将其添加到脚本中，如下所示:

$(function() {
  $.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').bind('keypress', function(e) {
        //here's the part that you might need to modify:
        if (e.which == 13) {
          $.fn.dataTableExt.iApiIndex = i;
          _that.fnFilter(anControl.val());
        }
      });
      return this;
    });
    return this;
  };
  $('#datatable').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers"
  }).fnFilterOnReturn();
});

这个Plunker的工作示例

相关文章：