jQuery DataTable column filters with delay search

Question

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

Answer 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