DataTable 的动态用户可选过滤器

Question

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

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

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

谢谢，

Answer 1

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

fiddle

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);
 });

DataTable 的动态用户可选过滤器

Dynamic user selectable filter for DataTable

datatables

yadcf