DataSearch of search-plugin does not contain html included in cell.

mahuss

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!

allan

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 the deferRender option. Doing the above search would be impossible with deferRender enabled.

That said, it is quite possible to do what you are looking for. The index parameter can be used to lookup the row with row() or cell() 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

mahuss

Yes, it seems this is apparently what I need. Really thank you for the help!