我正在使用jQuery的Datatables插件。我正在为我的 ASP.Net 项目使用服务器端处理功能。
每次我尝试在全局搜索中键入内容时，都会感到沮丧，我键入的每个字母都会调用服务器端方法并为我带来结果。
当要过滤的数据很大时，它会变得更加令人沮丧。
是否有任何选项或方法可以在按回车键而不是在任何按键上调用搜索方法？
我也尝试了Techie的代码。当然，我也收到了错误消息fnFilter is not a function.实际上，替换oTable.fnFilter(this.value);行到oTable.search( this.value ).draw();就可以完成这项工作，但就我而言，取消绑定/绑定函数是在初始化服务器端搜索表之前执行的。因此，我将取消绑定/绑定函数放入initComplete回调函数中，一切正常：
$(document).ready(function() {
var oTable = $('#test').dataTable( {
"...": "...",
"initComplete": function(settings, json) {
$('#test_filter input').unbind();
$('#test_filter input').bind('keyup', function(e) {
if(e.keyCode == 13) {
oTable.search( this.value ).draw();
}
});
}
});
});
要做的是取消绑定 DataTables 放在输入框上的按键事件处理程序，然后添加您自己的处理程序，当检测到返回键（键码 13）时，它将调用 fnFilter。
$("div.dataTables_filter input").keyup( function (e) {
if (e.keyCode == 13) {
oTable.fnFilter( this.value );
}
} );
还
$(document).ready(function() {
var oTable = $('#test').dataTable( {
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true } );
$('#test_filter input').unbind();
$('#test_filter input').bind('keyup', function(e) {
if(e.keyCode == 13) {
oTable.fnFilter(this.value);
}
});
} );
我最终在数据表（v1.10.15）中这样做。如果输入为空，我还阻止退格键和删除按钮发送搜索请求。
$.extend( $.fn.dataTable.defaults, {
"initComplete": function(settings, json) {
var api = this.api();
var textBox = $('#datatable_filter label input');
textBox.unbind();
textBox.bind('keyup input', function(e) {
if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
// do nothing ¯_(ツ)_/¯
} else if(e.keyCode == 13 || !textBox.val()) {
api.search(this.value).draw();
}
});
}
});
以下是我设法做到的：
$(document).on('focus', '.dataTables_filter input', function() {
$(this).unbind().bind('keyup', function(e) {
if(e.keyCode === 13) {
oTable.search( this.value ).draw();
}
});
});
以下是使用
1.10 版 api 更改处理它的方法
//prevents form submissions if press ENTER in textbox
$(window).keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
var searchbox = $('#ordergrid_filter input');
searchbox.unbind();
searchbox.bind('keyup', function (e) {
if (e.keyCode == 13) {
ogrid.search(this.value).draw();
}
});
var uitool = '';
searchbox.on("mousedown", function () {
uitool = 'mouse';
});
searchbox.on("keydown", function () {
uitool = 'keyboard';
});
//Reset the search if the "x" is pressed in the filter box
searchbox.bind('input', function () {
if ((this.value == "") && (ogrid.search() != '') && (uitool == 'mouse')) {
ogrid.search('').draw();
return;
}
});
终于用这种方式让它工作了
var oTable = $('#table-name').dataTable({
processing: true,
serverSide: true,
ajax: "file.json",
initComplete: function() {
$('#table-name_filter input').unbind();
$('#table-name_filter input').bind('keyup', function(e) {
if(e.keyCode == 13) {
oTable.fnFilter(this.value);
}
});
},
....
干杯
就是这样 代码它工作得很好！
$(function() {
var table = $('#DataTable1').DataTable({
proccessing: true,
searching: true,
paging: true,
serverSide: true,
initComplete: function() {
$('.dataTables_filter input').unbind();
$('.dataTables_filter input').bind('keyup', function(e){
var code = e.keyCode || e.which;
if (code == 13) {
table.search(this.value).draw();
}
});
},
ajax: {
url: '@Url.Action("Paginacao")',
type: 'POST'
},
language: {
url: '/plugins/datatables/lang/Portuguese-Brasil.json'
},
columns:
[
{ "data": "id", visible: false },
{ "data": "nome", "autoWidth": true },
{ "data": "cnpj", "autoWidth": true },
{
"render": function(data, type, full, meta) {
return '<a href=@Url.Action("Editar", "Usuario")?id='+full.id+'><b><i class="fa fa-edit bigfonts"></i> Editar</b></a>';
}
}
]
});
});
你可以与jQuery一起使用。
// get the global text
var globalSearch = $("#txtGlobal").val();
// then put them in the search textboxes
$("input[type='search']").val(globalSearch);
// trigger keyup event on the datatables
$("input[type='search']").trigger("keyup.DT");
$("input[type='search']")将获得所有搜索文本框。