Use two select options to filter a datatable simultaneously-CodePudding

I'm looking to use two select option filters on a datatable simultaneously. They currently work well if you select one of them individually, but they don't work in tandem (e.g., if you want to filter by two variables at the same time).

At the moment, once you select a second filter, the first filter becomes void, despite the dropdown still showing the value that had been selected before. Here's the code:

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<div >
    <select id="age">
        <option value="">- Select -</option>
        <option value="Tokyo">Tokyo</option>
        <option value="Edinburgh">Edinburgh</option>
    </select>
</div>

<div >
    <select id="position">
        <option value="">- Select -</option>
        <option value="accountant">Accountant</option>
        <option value="system architect">System Architect</option>
    </select>
</div>


<table id="example"  style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>System Architect</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>System Architect</td>
            <td>Accountant Land</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Accountant</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
    </tbody>
</table>

JavaScript

<script>
    $(document).ready(function () {
        var oTable = $('#example').dataTable();
        $('select#age').change(function () { oTable.fnFilter($(this).val()); });
        $('select#position').change(function () { oTable.fnFilter($(this).val()); });
    });
</script>

Issue:

CodePudding user response：

Pass column(index) to the fnFilter function

$(document).ready(function () {
 var oTable = $('#example').dataTable();
     $('select#age').change( function () {  oTable.fnFilter( this.value, 2 );  } );
     $('select#position').change( function () {  oTable.fnFilter( this.value, 1 ); });

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<div >
    <select id="age">
        <option value="">- Select -</option>
        <option value="Tokyo">Tokyo</option>
        <option value="Edinburgh">Edinburgh</option>
    </select>
</div>

<div >
    <select id="position">
        <option value="">- Select -</option>
        <option value="accountant">Accountant</option>
        <option value="system architect">System Architect</option>
    </select>
</div>


<table id="example"  style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>System Architect</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>System Architect</td>
            <td>Accountant Land</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Accountant</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
    </tbody>
</table>