jQuery DataTable列過濾器，延遲搜索，直到3個字符或輸入密鑰

Question

我試圖實現這一目標，但目前爲止無法正常工作。嘗試了這些建議，無論是在stackoverflow或數據表論壇迄今還沒有運氣。我嘗試了fnSetFilteringEnterPress的jQuery DataTables: Delay search until 3 characters been typed OR a button clicked，但到目前爲止無法使其工作，任何建議。任何建議，將不勝感激。由於

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