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

DataTable的动态用户可选过滤器

1 个答案: