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

Question

我正在努力实现这一目标，但到目前为止还没有成功。在 stackoverflow 或 datatables 论坛中尝试了这些建议，到目前为止还没有运气。我尝试了jQuery DataTables: Delay search until 3 characters been typed OR a button clicked 的 fnSetFilteringEnterPress，但到目前为止还不能让它工作，任何建议。任何建议将不胜感激。谢谢

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);
        }
    });
}

Answer 1

也许这个插件可能会有所帮助或让您了解如何继续：

Filter on Return

像这样将它添加到您的脚本中：

$(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 中的工作示例