Dynamic user selectable filter for DataTable

Question

Is there a way to give option to user select dynamically what type of filter they want applied to one or more columns?

We are using DataTables jquery plugin for display. I'm looking into yadcf plugin to use for filtering(Open to other options as well).

yadcf is super versatile in being able to define filters for each column at design time but we want the ability for the user to select the filter type at runtime. I'm looking into the yadcf code to understand how to do this but any pointers, ideas and helpful hints would be greatly appreciated.

Thanks,

by runtime you mean you'll give user choices for each column so they can select filter type and click a button then apply yadcf to table? — Ergec, Nov 17 '16 at 20:13
Exactly! But now the requirements have been reduced a bit so the filters are based on Data type of each column but the columns in the table are not fixed i.e. table itself can have variable number of columns and based on some background selection user can change what date goes into each column. Your example below gives me enough to start with the new requirement as well. Thank you. — PCash, Nov 20 '16 at 02:08

score 2 · Accepted Answer · answered Nov 17 '16 at 20:36

Ok I did just a simple example allowing user to define to enable/disable filtering for each column. You may extend this by placing more dropdowns and asking what type of filtering they want.

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

Dynamic user selectable filter for DataTable

1 Answers1