jQuery DataTable列过滤器，具有延迟搜索，直到3个字符或输入密钥

问题描述

我试图实现这一点，但到目前为止还没有工作。试过这些建议在stackoverflow或datatables论坛到目前为止还没有运气。我试过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 ，
 {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：pa geNo_1，value：page}）; 
 ResultData（sSource，aoData，fnCallback）; 
 
}）。columnFilter（{// sPlaceHolder：head：before，
 aoColumns：[{sWidth：5％，type：text}，
 {sWidth：3％，键入：select，values：['00'，'02']}，
 {sWidth：5％， 
 {type：date-range}，
 {type：text}，
 {type：text}，
 {type：number - b $ b {sWidth：5％，键入：text}] 
}）; 
}）; 
 
函数ResultData（sSource，aoData，fnCallback）{
 $ .ajax（{
 type：GET，
 url：sSource，
 contentType ：application / json; charset = utf-8，
 dataType：json，
 data：aoData，
 async：true，
 beforeSend：function（）{
 //显示覆盖：
 $（'＃overlay'）。show（）; 
}，
完成：function（）{
 //隐藏叠加：
 $（'＃overlay'）。hide（）; 
}，
 success：function（result）{
 var myObject = JSON.parse（result.d）; 
 fnCallback（myObject）; 
}，
错误：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）{
 //这里是您可能需要修改的部分：
 if （e.which == 13）{
 $ .fn.dataTableExt.iApiIndex = i; 
 _that.fnFilter（anControl.val（））; 
} 
}）; 
 return this; 
}）; 
 ret urn this; 
}; 
 
 $（'＃datatable'）。DataTable（{
oLanguage：{
sSearch：Filter Data
}，
iDisplayLength：-1，
sPaginationType：full_numbers
}）fnFilterOnReturn（）; 
}）; 
  

这个

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

解决方案

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

这篇关于jQuery DataTable列过滤器，具有延迟搜索，直到3个字符或输入密钥的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！