数据表多重过滤同一列

Question

我需要能够使用数据表将多个过滤器应用于单个列。

我一直在查看他们在此处提供的示例，但我的要求略有不同。

我表中的第一列将包含位置信息，每个单元格将包含一个building name和floor 。 我想要两个下拉菜单，允许用户对这两个进行过滤。

例如，“给我看一号楼和二楼”。

我可以得到第一个下拉列表来过滤建筑物，但第二个不会过滤地板。 我当前的代码在下面，这是一个codepen 。

注意我已经简化了这个表并将其限制为 6 条记录，我的实时表将包含数百条记录。

 $(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

这有效。

创建一个选择元素的数组，用空格将它们连接起来，然后将它们作为一个搜索词发送。 认为 DT 在他们的文档中有更多关于正则表达式的内容。

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