Individual column search on Enter key does not update other columns' values
Individual column search on Enter key does not update other columns' values
LukasL
Posts: 26Questions: 10Answers: 0
Hi there. I am having an issue with implementing Datatables with individual column search when pressing the Enter key.
I was able to implement it regularly from https://datatables.net/examples/api/multi_filter.html like this:
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
The code above works fine. However, because the table uses server-side processing, it's too expensive to search on keypress.
So, I am attempting to change the code so that it searches on Enter key:
table.columns().every(function () {
var that = this;
$('input', this.footer()).keypress(function (e) {
if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls
e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
}
});
});
With the code above, if I write a search value and press Enter, it searches as expected. However, if I write a search value in column1 but press enter on column2, it does not perform a search with the value in column1. This results in the user being required to press Enter on each column to add/delete the search value. The user is unable to first write search values in the desired columns and press Enter on one of them to search.
From what I've been able to gather, the table stores the value and it's not updated until Enter is pressed on the specific column. I am not sure how to get around this.
Thank you!
This question has an accepted answers - jump to answer
Answers
The column searches are independent of Datataables and Datatables knows nothing about the. If you hit enter in one input there is nothing that will automatically collect the others. You will need to update your input event to get the values for the columns. For each column use
column().search()then when those are all prepared usedraw()to have Datatables send all the column searches to the server for searching.This example doesn't have search inputs but will give you an idea of what I mean:
http://live.datatables.net/yogadiku/1/edit
Kevin
Thank you for your response kthorngren. I should mention my table generates columns dynamically, so I don't know how many columns my table will have. However, your response is helping me and I'm working towards figuring this out.
kthorngren, with your help, I was able to get the code to work! Should I mark your post or this post as answer?
You can mark both if you want. Not sure if you can mark your own as answered though.
Kevin
Kevin, if Datatables knows nothing about the other inputs, why does column searching work with the original code? If I search a column and then another one, I get both columns' search values returned to the model.
Because you are executing this in the event.
Are you talking about with the original code you posted?
Datatables keeps track of the searches via
column().search()and will send the search values for each column for each request to the server. This is independent of what values are in the inputs. You can see this in this example:http://live.datatables.net/vilukojo/1/edit
Click the Search button and this code will execute:
The first search shows this:
The second shows this:
HTH,
Kevin
How to achieve same on key press if search box move to header? I have tried with $('input', this.header()).keypress(function (e) {... but it's not working.
See this example:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
Try removing the
keyupevent. If you still need help please provide a running test case showing the problem so we can help debug.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin