DataTable 的动态用户可选过滤器答案

【问题标题】：Dynamic user selectable filter for DataTableDataTable 的动态用户可选过滤器
【发布时间】：2016-11-17 17:12:04
【问题描述】：

有没有办法让用户动态选择他们想要应用于一个或多个列的过滤器类型？

我们正在使用 DataTables jquery 插件进行显示。我正在研究用于过滤的 yadcf 插件（也可以使用其他选项）。

yadcf 非常通用，能够在设计时为每一列定义过滤器，但我们希望用户能够在运行时选择过滤器类型。我正在研究 yadcf 代码以了解如何执行此操作，但我们将不胜感激任何指针、想法和有用的提示。

谢谢，

【问题讨论】：

运行时您的意思是您将为每一列提供用户选择，以便他们可以选择过滤器类型并单击按钮然后将 yadcf 应用于表？
没错！但是现在要求有所降低，因此过滤器基于每列的数据类型，但表中的列不固定，即表本身可以具有可变数量的列，并且基于某些背景选择，用户可以更改日期进入每一列。您下面的示例也足以让我从新要求开始。谢谢。

标签： datatables yadcf

【解决方案1】：

好的，我只是做了一个简单的示例，允许用户定义为每列启用/禁用过滤。您可以通过放置更多下拉菜单并询问他们想要什么类型的过滤来扩展此功能。

小提琴

https://jsfiddle.net/ergec/6yjrrjyr/

html

Col 1:<select class="colfiltering" data-colnumber="0">
    <option value="">No</option>
    <option value="1">Yes</option>
</select>
Col 2:
<select class="colfiltering" data-colnumber="1">
    <option value="">No</option>
    <option value="1">Yes</option>
</select>
<button id="inityadcf">
    Apply Filters To Table
</button>
<br>
<br>
<br>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Row 1</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

javascript

 var myTable = $('#table_id');
 myTable.DataTable();
 $("#inityadcf").click(function() {
 var colfiltering = [];
     $(".colfiltering").each(function() {
         var $that = $(this);
         if ($that.val()) {
             colfiltering.push({
                 column_number: $that.data("colnumber")
             });
         }
     });
     myTable.DataTable().destroy();
     myTable.DataTable();
     yadcf.init(myTable.DataTable(), colfiltering);
 });

【讨论】：