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

【问题标题】：How to exclude hidden element from yadcf column(search) filter?如何从 yadcf 列（搜索）过滤器中排除隐藏元素？
【发布时间】：2020-12-12 02:49:03
【问题描述】：

我用的是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/

【问题讨论】：

如果使用 column_data_type 作为 render_html 会怎样？
我也用过。但是，它不起作用。
请提供一个最小的 jsfiddle 示例页面，以便我尝试帮助
@Daniel 你好，这是我的 jsfiddle jsfiddle.net/vjmvj/w5dbtczo/28

标签： javascript yadcf

【解决方案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/

【讨论】：

是的.. 谢谢，我也做了！

【解决方案2】：

Answer Continued...

这是我的自定义函数

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/

【讨论】：