javascript - JS Datatables - 从标题中的组合框中过滤表格

Question

我有以下数据表，它使用 https://datatables.net/ 中的 js 数据表插件

使用以下 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插件，通过定位所需的列(在您的情况下 1)将其附加到 DataTables 的标题，获取选中的值，用 | (或操作数)连接它然后使用 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有关更多详细信息，我建议移动页脚上的过滤功能，因为单击表格标题上的下拉按钮将对表格进行排序。