CODEWITHSUNDEEP
datatablesyadcf
PCash
PCash

Reputation: 53

Dynamic user selectable filter for DataTable

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,

Upvotes: 1

Views: 2172

Answers (1)

Ergec
Ergec

Reputation: 11824

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

Upvotes: 2

Related Questions