數據表多重過濾同一列

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