我已经用ajax创建了jQuery数据表。我希望在页面更改和加载期间触发ajax;但是我想实现简单的智能搜索,而搜索时不会触发ajax。
有什么方法可以禁用ajax以便进行搜索吗?我尝试了如下自定义过滤。但是,它仍然无法正常工作。请提出建议。
$('#table').DataTable({
dom: '<"top-filter row"<"col-md-5 no-pad-l"f><"col-md-6 pagination-margin no-pad-r"p><"cog-drop cog-width"B>><"table-body row"t>r<"row"i>',
scrollY:"200px",
pagingType: "full_numbers",
scrollCollapse: true,
searching: false,
columns: columns,
pageLength:100,
lengthMenu: [
[10, 20, 50, 100],
['10 items', '20 items', '50 items', '100 items']
], buttons: [
{
extend: 'pageLength',
text: '<i class="fa fa-cog"></i>',
className:"bs-pageLength"
}],
language: {
"emptyTable": "No data available",
"lengthMenu": "_MENU_",
"sInfo": "Records: _START_-_END_ of _TOTAL_",
"sInfoFiltered": "",
oPaginate: {
sNext: '<i class="fa fa-angle-right"></i>',
sPrevious: '<i class="fa fa-angle-left"></i>',
sFirst: '<i class="fa fa-angle-double-left"></i>',
sLast: '<i class="fa fa-angle-double-right"></i>'
},buttons: {
pageLength: '<i class="fa fa-cog"></i>'
}
},
serverSide: true,
ajax: {
url: url,
data: function (d) {
$.blockUI();
var data = {};
data["page"] = (d.start==0?d.start:Math.floor(d.start/d.length))+1;
data["pageSize"] = d.length;
data["uniqueKey"] = fieldId;
return data;
},
dataSrc: function (json) {
$.unblockUI();
return json.data;
}
},
initComplete : function() { $.unblockUI();}
});
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var val=$("#searchArea").val();
if (data[0].indexOf(val)!=-1 || data[1].indexOf(val)!=-1 || data[2].indexOf(val)!=-1){
return true;
}
return false;
}
);
$('#searchArea').keyup( function() {
table.draw();
});
HTML:
<div><input type="text" id="searchArea" name="searchArea"></div>
将不胜感激。预先感谢。
$.ajax({
type: "Post",
url: "/Someting",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if ($.fn.dataTable.isDataTable('.table')) {
table.destroy();
table = $('.table').DataTable({
"aaData": data,
"aoColumns": [{ "data": "something" }, { "data": "somethingElse" }]
});
}
else {
table = $('.table').DataTable({
"aaData": data,
"aoColumns": [{ "data": "something" }, { "data": "somethingElse" }]
});
}
},
error: function (err) {
alert(err);
}
});