用于DataTable的动态用户选择过滤器

Question

是否有一种方法可以让用户动态地选择他们希望应用于一个或多个列的筛选器类型？

我们使用DataTables jquery插件来显示。我正在研究用于过滤的yadcf插件(也打开其他选项)。

yadcf能够在设计时为每一列定义过滤器，但我们希望用户能够在运行时选择筛选器类型。我正在研究yadcf代码，以了解如何做到这一点，但是任何指针、想法和有用的提示都将是非常感谢的。

谢谢,

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