如何從 yadcf 列（搜索）過濾器中排除隱藏元素？

Question

我正在使用yadcf過濾器插件，代碼如下...

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>

在這里，我想從 yadcf 的列過濾器中排除具有“eg2”和“eg4”ID 的跨度元素（隱藏）。 但是每當我從 select2 中選擇一個選項時，它都會給我兩行，因為隱藏元素中存在相同的文本。

我的JS如下..

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)',
    }], );  
});

如何從 yadcf 列（搜索）過濾器中排除隱藏元素？ 我不知道怎么做。 請幫忙。 提前致謝。

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

Answer 1

您可以使用filter_type: 'multi_select_custom_func' （您仍然需要應用您的邏輯）

閱讀文檔

查看示例代碼

$(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);
    }
});

看到它工作（你仍然需要應用你自己的邏輯） https://jsfiddle.net/vedmack/kw1aophg/

Answer 2

回答繼續...

這是我的自定義函數

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/