DataSearch of search-plugin does not contain html included in cell.
DataSearch of search-plugin does not contain html included in cell.
Hello,
I am actually trying to apply a filter for table column that contains select element, it looks quite regular. More or less like below
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
My intention is to utilize the search plugin https://datatables.net/manual/plug-ins/search
My implementation looks like:
$.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
var displayRow = true;
Object.keys(uncheckedColumns).forEach((key, index) => {
if (
uncheckedColumns[key].includes( searchData[key] ) ||
uncheckedColumns[key].includes(getSelectedItem(searchData[key] ))) {
displayRow = false;
}
if ( searchData[key].trim() === "" ) {
searchData[key]="^$";
displayRow = true;
}
});
return displayRow;
}
);
UncheckedColumns dict. contains lists of unchecked checkboxes from dropdowns for particular columns.
What I need is to prepare the getSelectedItem function. it is to return (somehow) the text of the selected option.
Unfortunately it seems searchData dict parameter does not contain any html tags so I cant parse it. When I try to see what is inside
getSelectedItem = (sd) => {console.log(sd);};
In console I see just "1234". Could you kindly advice how could I parse the html part to obtain needed value? Or maybe obtain a full DOM element to use its parameters through js/jquery.
I am grateful for your help!
This question has an accepted answers - jump to answer
Answers
Using a
select
is a little difficult since the search function isn't passed in the element, which you would need to query to get which option is selected. This is intentional for performance, but also for consideration of thedeferRender
option. Doing the above search would be impossible withdeferRender
enabled.That said, it is quite possible to do what you are looking for. The
index
parameter can be used to lookup the row withrow()
orcell()
and operate from there.Here is an example of how that can be done. I've used
column().search.fixed()
which was introduced in DataTables 2, rather than the old global search, but you could use this approach there as well if you wanted.Allan
Yes, it seems this is apparently what I need. Really thank you for the help!