如何从 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 的列过滤器中排除 ID 为“eg2”和“eg4”的跨度元素（隐藏）。但是每当我从 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'（您仍然需要应用您的逻辑）

Read the docs

查看示例代码

$(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/

如何从 yadcf 列（搜索）过滤器中排除隐藏元素？

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

javascript

yadcf