I am using Datatables plugin of jQuery. I am using server side processing functionality for my ASP.Net project.
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?
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 fnFilter when the return key (keyCode 13) is detected.
$("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);
}
});
} );
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 initComplete callback function, and everything works fine:
$(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();
}
});
}
});
});
oTable as oTable.search(...) when initComplete is actually being run as the final part of the oTable initialization?
oTable object since its initialization is finished...
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.
$.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();
}
});
}
});
table object came?
var table = $('#datatable').DataTable({ /* ... */ });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();
}
});
});
Here is how to handle it with the api change in version 1.10
//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;
}
});
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
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>';
}
}
]
});
});
You can use with 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.
