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

Question

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

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

示例表：

所以，我想做的是：

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

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

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

提前致谢。

Answer 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.

希望对您有所帮助。