DataTables 中的单个下拉列表中的多列过滤

Posted 2023-05-08

【中文标题】DataTables 中的单个下拉列表中的多列过滤

【英文标题】：Multiple column filtering in a single dropdown in DataTables

【发布时间】：2017-01-12 17:49:13

【问题描述】：

我正在使用 DataTables，它是 jQuery javascript 库的插件。已经有可能进行搜索和过滤，但我没有找到，我在寻找什么。

我已经在网上搜索过，但我还没有找到我的问题的解决方案。也许我搜索了错误的术语，所以如果我的问题的解决方案可能非常简单，我很抱歉。

示例表：

所以，我想做的是：

提供一个带有多个过滤选项的单一下拉菜单 每个选项都提供了一个自定义过滤器（例如，“option1”显示所有 可用的记录，“option2”显示所有可用的记录 可用并且有标签 F，'option3' 显示所有记录 可用并带有标签 E，...) 立即“实时”应用过滤器

总结：我想创建一个下拉菜单，提供执行多列过滤/搜索的选项。

那么，我该如何实现呢？这在 DataTables 中是否可行？

提前致谢。

【问题讨论】：

应该可以，但请向我们展示您已经尝试过的内容......也许在一个简单的 JSFiddle 中？

到目前为止，我还没有为自己找到任何解决方案。这里有一点JSFiddle。我只实现了通过搜索栏搜索，没有真正的过滤。而且我知道我可以搜索特定的列。但我不知道如何搜索多个列。

【参考方案1】：

这个JS：

$(document).ready(function() 
    var table = $('#example').DataTable();
    $('select[name="filter"]').change(function() 
        if (!$(this).val()) 
            table.columns().search("").draw();
         else 
            table.columns().search("");
            var option = $(this).find(":selected");
            var columns = Object.keys(option.data());
            console.log(columns)
            $.each(columns, function(k, v)
                table.columns(parseInt(v, 10)).search(option.data(v));
            );
            table.draw();
        
    );
);

使用此 html：

<select name="filter">
    <option value="">No filter</option>
    <option data-1="Accountant">Filter Accountant</option>
    <option data-2="Tokyo">Filter Tokyo</option>
    <option data-1="Accountant" data-2="Tokyo">Filter Accountant in Tokyo</option>
</select>

应该做你需要的。我们遍历所选选项的数据属性并搜索相关列。工作 JSFiddle here.

希望对您有所帮助。

【讨论】：

非常感谢@annoyingmouse，工作起来就像一个魅力——正是我想要的。

我有一个附加问题@annoyingmouse。是否也可以过滤隐藏列，例如按名称调用列或类似的想法？

这很酷，谢谢。所以就像我有一个我所有列的列表（比如我的数据库），独立于我显示的表 - 并且索引总是保持不变，无论哪些列被隐藏或显示？ @annoyingmouse

没错。这取决于它们是否在您的数据中。我想这将取决于数据是如何生成并放置在 Table 或 DOM 中的。

一个月后又提出了另一个问题。我怎么能搜索空列？一个简单的<option data-8="">Some text</option> 似乎不起作用。 @annoyingmouse