我正在努力实现这一点,但到目前为止还不起作用。在stackoverflow或datatable论坛上尝试了这些建议,到目前为止还没有运气。我尝试了jQuery数据表的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的工作示例