数据表全局搜索输入键的按键而不是任何键按键
我正在使用jQuery的Datatables插件。 我正在为ASP.Net项目使用服务器端处理function。
每当我尝试在全局搜索中键入内容时，它会感到沮丧，我输入的每个字母都调用服务器端方法并为我带来结果。
当要过滤的数据很大时，它会变得更加令人沮丧。
是否有任何选项或方法可以在输入键的按键上调用搜索方法而不是按任何按键？
该怎么做只是取消绑定DataTables放在输入框上的keypress事件处理程序，然后添加自己的，当检测到返回键（keyCode 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); } }); } );
我也试过了Techie的代码。 当然，我也得到了错误信息fnFilter is not a function 。 实际上，替换行oTable.fnFilter(this.value); 通过oTable.search( this.value ).draw(); 我会做的，但在我的情况下，unbind / bind函数是在我的服务器端搜索表初始化之前执行的。 因此，我将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(); } }); } }); });
以下是如何使用版本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; } });
我最终在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(); } }); } });
终于让它以这种方式工作了
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); } }); }, ....
干杯
你可以使用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']")将获得所有搜索文本框。