jQuery DataTable column filters with delay search

问题:

I'm try to achieve that, but so far not working. Tried those suggestion either in stackoverflow or datatables forum so far no luck yet. I tried the fnSetFilteringEnterPress of jQuery DataTables: Delay search until 3 characters been typed OR a button clicked but so far can't make it work, any suggestion. Any advise would be appreciate. Thanks

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

回答1:

Maybe this plugin might be of some help or give you an idea on how to continue:

Filter on Return

Add it to your script like this:

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

Working example in this Plunker