在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。

希望能有所帮助。