individual text search field and inputs in the columns

fathom

Hello,

Is there a way to filter between the value properties of input fields?
One field looks like: <td><input type="text" value="somevaule"></td>
I have a text search field defined for this:
this.api().columns(textcols).every(function() {
let column = this;
let input = $('<input class="form-control" type="text">')
.appendTo($('#serverlist thead tr:eq(1) th').eq(column.index()).empty())
.on('keyup', function () {
console.log(this.value);
table
.column( $(this).parent().index() )
.search(this.value, true, false)
.draw();
});
});
Unfortunately this does not show the searched value in the column. (it works fine without the input field).

Tamás

fathom

also tried with just .search(this.value) and the value passed is the fine.

kthorngren

It's hard to imagine/debug what is happening with just the code snippet. See if this example helps. If you still need help then please provide a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I had a few minutes and built a test case with your code:
https://live.datatables.net/mizesowu/1/edit

The test case seems to work. Please update the test case to show the issue you are having.

Kevin

kthorngren

Are you using server side processing? If yes then the above code won't work as the server script is meant to perform the search function.

Kevin

fathom

https://live.datatables.net/mevemiva/1/edit
I have added an input field to salary and added the salary as default value. In this case the search does not come back with anything.

allan

Because the salary has input elements. For searching, DataTables will take the HTML of the cell, strip any HTML and search on the remaining string. In this case, that is empty, since the value is a property of the input.

The way to resolve this would be to have a data-search attribute on the td elements matching the string you want to use for search. Then on input, update the data-search attribute and invalidate the cell's data. I don't think there is a simpler way in DataTables to search on live DOM properties.

Allan

fathom

actually since the data is fetched with PHP, only adding the data-search property with the right value work perfectly.

Thanks for your help!

allan

It will work until the end user changes the value. If that is a consideration, you might want to add the event listener.

Allan