Столбец Datatables Multi Filter в одном столбце

Question

Мне нужно иметь возможность применять несколько фильтров к одному столбцу, используя таблицы данных.

Я смотрел на пример, который они предоставили здесь , но мои требования немного отличаются.

Первый столбец в моей таблице будет содержать информацию о местоположении, каждая ячейка будет содержать building name и floor. Я хочу иметь два выпадающих списка, которые позволят пользователям фильтровать оба из них.

Так, например, ' Покажите мне здание 1 и второй этаж '.

Я могу получить первый выпадающий список для фильтрации на здании, но второй не фильтрует на этаже. Мой текущий код ниже, вот 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

Это работает.

Создайте массив элементов select, объедините их с пробелом и отправьте их как один поисковый запрос. Подумайте, 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();
} );