jQuery DataTable列filter,延迟搜索到3个以上的字符或输入密钥

我试图实现这一目标,但到目前为止还没有成功。 到目前为止,在stackoverflow或datatables论坛上试过这些建议还没有运气。 我尝试了jQuery DataTables的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中的工作示例