JS Datatables - таблица фильтрации из поля со списком в заголовке

Question

У меня есть следующий источник данных, который использует подключаемый модуль js datatable от https://datatables.net/

Набор данных устанавливается с использованием следующего JS:

$(document).ready(function () {
    $('#tracerTable').DataTable({
        "bInfo": false,
        "order": [[2, "desc"]], //order by date created
        "aoColumnDefs": [
            { aTargets: [3], "bSortable": false },
            { aTargets: [4], "bSortable": false },
            { aTargets: [5], "bSortable": false }
        ]
    });
}

Вопрос: Можно ли обновить JS, чтобы разрешить мне фильтровать столбец «Тип», используя раскрывающийся список с опциями галочки в заголовке таблицы (так же, как опция фильтрав Excel - см. изображение ниже).Я хотел бы, чтобы это было для выбора водных и нефтяных трассеров, но не показывать газовые трассеры.

Если это невозможно в подключаемом модуле данных, может ли кто-нибудь предложить плагин, который обеспечивал бы эту функциональность?

Answer 1

Используйте плагин bootstrap-select , добавьте его в заголовок ваших DataTables, нацеливаясь на нужный столбец (в вашем случае 1), получите проверенные значения, присоедините его к | (операнд или) затем используйте search API.

var table = $('#example').DataTable({
  initComplete: function() {
    this.api().columns([1]).every(function() {
      var column = this;
      var select = $('<select class="selectpicker" data-show-content="false" data-none-selected-text="Position" multiple><option value="" >Show All</option></select>')
        .appendTo($(column.header()).empty())//use $(column.footer() to append it to the table footer instead
        .on('changed.bs.select', function(e) {
          var val = $(this).val();
          var fVal = val.join("|")
          column
            .search(fVal, true, false)
            .draw();
        }); //select

      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      }); //column.data
    }); //this.api
  } //initComplete
});

Fiddle для получения более подробной информации, я предлагаю , перемещая функцию фильтра нанижний колонтитул , так как нажатие на выпадающую кнопку в заголовке таблицы приведет к сортировке таблицы.