Datatables Multi Filter Same Column

Question

I need to be able to apply multiple filters to a single column using datatables.

I've been looking at an example they have provided here but my requirements are slightly different.

The first column in my table will contain location information, each cell will contain a building name and floor . I want to have two dropdowns that allow users to filter on both of these.

So eg ' Show me Building 1 and Second Floor '.

I can get the first dropdown to filter on building, but the second doesn't filter on floor. My current code is below, here's a codepen .

Note I have simplified this table and limited it to 6 records, my live table will contain hundreds of records.

 $(document).ready(function() { var table = $("#example").DataTable(); $("#dropdown1").on("change", function() { table .columns(0) .search(this.value) .draw(); }); $("#dropdown2").on("change", function() { table .columns(0) .search(this.value) .draw(); }); });

 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/> <select id="dropdown1"> <option value="">Building</option> <option value="Building 1">Building 1</option> <option value="Building 2">Building 2</option> </select> <select id="dropdown2"> <option value="">Floor</option> <option value="First Floor">First Floor</option> <option value="Second Floor">Second Floor</option> <option value="Third Floor">Third Floor</option> </select> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Location</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Building 1<br><span class="floor">First Floor</span></td> <td>Available</td> </tr> <tr> <td>Building 1<br><span class="floor">Second Floor</span></td> <td>Available</td> </tr> <tr> <td>Building 1<br><span class="floor">Third Floor</span></td> <td>Available</td> </tr> <tr> <td>Building 2<br><span class="floor">First Floor</span></td> <td>Unavailable</td> </tr> <tr> <td>Building 2<br><span class="floor">Second Floor</span></td> <td>Available</td> </tr> <tr> <td>Building 2<br><span class="floor">Third Floor</span></td> <td>Unavailable</td> </tr> </tbody> </table>

Answer 1

This works.

Create an array of the select elements, join them with a space and send them as one search term. Think DT has more on regex on their docs.

<select class="filter_location" id="filter_building">
    <option value="">Building</option>
    <option value="Building 1">Building 1</option>
    <option value="Building 2">Building 2</option>
</select>

<select class="filter_location" id="filter_floor">
    <option value="First Floor">First Floor</option>
    <option value="Second Floor">Second Floor</option>
    <option value="Third Floor">Third Floor</option>
</select>

$('select.filter_location').on( 'change', function () {
    var val = [];
    val.push($('#filter_building').val());
    val.push($('#filter_floor').val());
    table.column(0).search(val.join(' ')).draw();
} );