jQuery 数据表全局搜索输入键的按键而不是任何按键按键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14619498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
datatables global search on keypress of enter key instead of any key keypress
提问by Prasad Jadhav
I am using Datatablesplugin of jQuery. I am using server side processing functionality for my ASP.Net project.
我正在使用jQuery 的Datatables插件。我正在为我的 ASP.Net 项目使用服务器端处理功能。
Its get frustrating when each time I try to type something in global search, with each letter I type it calls the server side method and brings result for me.
每次我尝试在全局搜索中输入内容时，它都会令人沮丧，我输入的每个字母都会调用服务器端方法并为我带来结果。
It gets more frustrating when the data to be filter is large.
当要过滤的数据很大时，它会变得更加令人沮丧。
Is there any option or way to call search method on keypress of enter key and not on any key press?
是否有任何选项或方法可以在 Enter 键的按键上调用搜索方法，而不是在任何按键上？
采纳答案by Techie
What to do is to just unbind the keypress event handler that DataTables puts on the input box, and then add your own which will call fnFilterwhen the return key (keyCode 13) is detected.
要做的就是解除绑定 DataTables 放在输入框上的按键事件处理程序，然后添加您自己的处理程序，当检测到返回键（keyCode 13）时，它将调用fnFilter。
$("div.dataTables_filter input").keyup( function (e) {
if (e.keyCode == 13) {
oTable.fnFilter( this.value );
}
} );
Else
别的
$(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);
}
});
} );
回答by Jan
I tried Techie's code, too. Of course, I also got the error message fnFilter is not a function.
Actually, replacing the line oTable.fnFilter(this.value);through oTable.search( this.value ).draw();would do the job, but in my case, the unbind/bind functions were executed before my server-side searched table was initialised. Therefore, I put the unbind/bind functions into the initCompletecallback function, and everything works fine:
我也试过 Techie 的代码。当然，我也收到了错误信息fnFilter is not a function。实际上，oTable.fnFilter(this.value);通过替换行oTable.search( this.value ).draw();可以完成这项工作，但在我的情况下，在我的服务器端搜索表初始化之前执行了解除绑定/绑定函数。因此，我将 unbind/bind 函数放入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();
}
});
}
});
});
回答by Abdalla Arbab
I end up doing this in Datatables(v1.10.15). I also prevent the backspace and the delete button from sending search request if input was empty.
我最终在 Datatables(v1.10.15) 中执行此操作。如果输入为空，我还会阻止退格键和删除按钮发送搜索请求。
$.extend( $.fn.dataTable.defaults, {
"initComplete": function(settings, json) {
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()) {
table.search(this.value).draw();
}
});
}
});
回答by Chad Kuehn
Here is how to handle it with the api change in version 1.10
以下是如何通过 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;
}
});
回答by K. Igor
Here is how I managed to do it:
这是我设法做到的：
$(document).on('focus', '.dataTables_filter input', function() {
$(this).unbind().bind('keyup', function(e) {
if(e.keyCode === 13) {
oTable.search( this.value ).draw();
}
});
});
回答by Marinpietri
That's it code bellow It works so fine !
这就是下面的代码它工作得很好！
$(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 [email protected]("Editar", "Usuario")?id='+full.id+'><b><i class=\"fa fa-edit bigfonts\"></i> Editar</b></a>';
}
}
]
});
});
回答by Jaume Bosch
Finally got it working using this way
终于用这种方式让它工作了
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);
}
});
},
....
Cheers
干杯
回答by spikee
You can use with jQuery.
您可以与 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']")will get all of the search textboxes.
$("input[type='search']")将获得所有搜索文本框。
