Ниспадающая фильтрация в jQuery DataTables

Question

Ссылка на CodePen .

Я использую плагин Datatables jQuery для этой таблицы.

Я пытаюсь выяснить, как реализовать раскрывающийся список «Фильтровать по местоположению» вверху для работы. Так что если вы выберете Bracebridge из раскрывающегося списка, например, он показывает только продукты с Bracebridge. Я пытался поиграться с функцией column (). Search () от Datatables, с трудом заставляя ее работать.

HTML

<!--Filter-->
          <p>Filter By Location</p>
          <select id="locfilter" name="location">
            <option value="">All</option>
            <option value="Ajax">Ajax</option>
            <option value="Barrie">Barrie</option>
            <option value="Belleville">Belleville</option>
            <option value="Bracebridge">Bracebridge</option>
            <option value="Bradford">Bradford</option>
            <option value="Brampton">Brampton</option>
            <option value="Brantford">Brantford</option>
            <option value="Burlington">Burlington</option>
            <option value="Cambridge">Cambridge</option>
            <option value="Cobourg">Cobourg</option>
            <option value="Concord">Concord</option>
            <option value="Gloucester">Gloucester</option>
            <option value="Gormley">Gormley</option>
            <option value="Guelph">Guelph</option>
            <option value="Hamilton">Hamilton</option>
            <option value="Kingston">Kingston</option>
            <option value="London">London</option>
            <option value="Milton">Milton</option>
            <option value="Napanee">Napanee</option>
            <option value="Niagara Falls">Niagara Falls</option>
            <option value="North Bay">North Bay</option>
            <option value="Ottawa">Ottawa</option>
            <option value="Owen Sound">Owen Sound</option>
            <option value="Peterborough">Peterborough</option>
            <option value="Sarnia">Sarnia</option>
            <option value="Sault Ste Marie">Sault Ste Marie</option>
            <option value="Sudbury">Sudbury</option>
            <option value="Timmins">Timmins</option>
            <option value="Toronto">Toronto</option>
            <option value="Trenton">Trenton</option>
            <option value="Waterloo">Waterloo</option>
            <option value="Windsor">Windsor</option>
            <option value="Woodstock">Woodstock</option>
          </select>

JS (есть только этот фрагмент для таблицы)

$(document).ready(function() {
  $("#used-equip-table").DataTable();
});

Answer 1

Добавить событие при изменении вашего пользовательского фильтра.

Пожалуйста, посмотрите это -

$(document).ready(function() {
 $("#used-equip-table").DataTable();
});

$('#locfilter').on( 'change', function () {
 $('#used-equip-table').DataTable().column( 4 ).search(
   $('#locfilter').val()
 ).draw();
});

Пожалуйста, посмотрите рабочий пример здесь

Answer 2

   $("#locfilter").change(function() {
    var value = $("#locfilter").val();
    $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        return data[4]==value
            ? true
            : false
        }     
    );
    table.draw();
    $.fn.dataTable.ext.search.pop();
   });

Попробуйте этот код, он работал для меня.

Answer 3

Обновите свой раздел JavaScript следующим образом:

$(document).ready(function() {

  // create a variable for your table, so we can refer to it below:
  var table = $("#used-equip-table").DataTable();

  // add events to your drop-down control, to detect changes:
  $('#locfilter').on( 'keyup change clear', function () {
    table.draw();
  } );

  // use the following to process filter/search changes:
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      var selectedValue = $('#locfilter').val();
      if (data[4].includes(selectedValue)) { // 4 = the fifth column!
        return true;
      } else {
        return false;
      }
    }
  );

});

Эта функция ext.search.push, показанная выше, является частью плагина search, описанного здесь .