How to exclude hidden element from yadcf column(search) filter?

Question

I'm using yadcf filter plugin and the code is as follows...

HTML:

<table id="myTable">
  <thead>
    <tr>
      <th>xyz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span>
          <span id="eg1">abc</span>
          <span id="eg2" style="display: none;">fgd abc wew</span>
        </span>  
      </td>
    </tr> 
    <tr>
      <td>
        <span>
          <span id="eg3">wew</span>
          <span id="eg4" style="display: none;">fgd abc wew</span>
        </span>  
      </td>
    </tr>
  </tbody>
</table>

Here, I want to exclude span element(hidden) having Id of "eg2" and "eg4" from the column filter of yadcf. But whenever I choose an option from select2 it gives me both row as the same text is there in the hidden element.

My JS is as below..

JS:

$(document).ready( function () {
    let dataTable = $('#myTable').DataTable();
    yadcf.init(dataTable, [{
        column_number: 0,
        filter_type: 'multi_select',
        select_type: 'select2',
        column_data_type: 'html',
        html_data_type: 'selector',
        html_data_selector: 'span:eq(0)',
    }], );  
});

How can I exclude hidden elements from yadcf column(search) filter? I couldn't get the way how to do it. Please help. Thanks in advance.

JSFIDDLE: https://jsfiddle.net/vjmvj/w5dbtczo/28/

Answer 1

You can use the filter_type: 'multi_select_custom_func' (you still need to apply your logic)

Read the docs

See example code

$(document).ready( function () {
    let dataTable = $('#myTable').DataTable();
    yadcf.init(dataTable, [{
            column_number: 0,
        filter_type: 'multi_select_custom_func',
        custom_func: myCustomFilterFunction,
        select_type: 'select2',
        column_data_type: 'html',
        html_data_type: 'selector',
        html_data_selector: 'span:eq(0)'
    }], );
    
    function myCustomFilterFunction(filterVal, columnVal, rowValues, stateVal) {
        //apply logic here
        console.log(columnVal);
        console.log(stateVal);
    }
});

See it working (you still need to apply your own logic) https://jsfiddle.net/vedmack/kw1aophg/

Answer 2

Answer Continued...

This is my custom function

function multiSelectCustomFilterFunction(filterVal, columnVal) {
    const item = columnVal.trim().split(/[ \t]{5,}/g)[0]; // To select first inner span tag which is visible
    filterValArray = [];
    filterVal.forEach(trimmer);
    function trimmer(value) {
        filterValArray.push(value.trim()); // To remove extra space around values
    }
    return filterValArray.length != 0 ? filterValArray.includes(item.trim()) : true ; // To match selected and available data 
}

JSFIDDLE: https://jsfiddle.net/vjmvj/w5dbtczo/37/