如何使用复选框设置列以过滤datatable jQuery

Question

我正在使用datatables，尝试实现筛选功能，问题是我想从多个复选框中选择需要过滤的列。

所以，如果我选择了一列，结果会显示出4或5列，但我只选择了1列，并且我无法找到问题所在。如下图所示：

[![enter image description here][1]][1]

正如您在图中所看到的，我只选择了一个Stantion code，但是我得到了5个可以筛选的列，我应该只有一个。

我的代码：[jsfinddle][2]

addSpliting('');

function addSpliting(val) {
  
  if(val != '') {
      
      $("#test1").DataTable({
        destroy: true,
        searchPanes: {
          layout: 'columns-4',
        },
        dom: 'Pfrtip',
        columnDefs: [{
          searchPanes: {
            show: true,
          },
          targets: val
        }]
      });
   }
   else {
      $("#test1").DataTable({
         destroy: true
      });
   }
}

function setFilters() {
  
  $("table thead tr th").each(function(index) {
    
    var boxes = `<label>
                <input type="checkbox" class="checkbox" id="${index}"/>
                ${$(this).text()}
                </label>`
    if ($(this).text() != "") $(".checkBoxes").append(boxes);
  });
}

setFilters();

$("#createFilter").on("click", function() {
   var columFilters = [];
  
   $('.checkbox:checked').each(function () {
      columFilters.push(parseInt($(this).attr('id')));
   });
  
   addSpliting(columFilters);
});

- Andrew

---

这是如何在不到一分钟内获得4票的？那一定是一个新纪录... - Mr. Polywhirl

Answer 1

我尝试在文档中查找与您的问题相关的内容，但没有找到任何信息。对我来说，似乎没有本地的方法来配置您想要的布局。而且无论您定义什么目标，搜索窗格都会呈现在每个列中。但是通过了解这一点，我找到了一种“hacky”的实现该功能的方法。

每个搜索窗格都放置在具有以下类的div中：.dtsp-searchPanes

现在只需迭代每个子div并检查当前迭代是否包含在您的val数组中。如果不是：隐藏相应的div，否则显示div。

您的addSplitting函数应如下所示：

function addSpliting(val) {
  if (val != '') {
    $("#test1").DataTable({
      destroy: true,
      searchPanes: {
        layout: 'columns-4',
      },
      columnDefs: [{
        searchPanes: {
          show: true,
        },
        targets: '_all'
      }],
      dom: 'Pfrtip'
    });
    $('.dtsp-searchPanes').children().each(function(i, obj) {
      if (!val.includes(i)) $(this).hide();
      else $(this).show();
    });
  } else {
    $("#test1").DataTable({
      destroy: true
    });
  }

}

我检查了几次，似乎可以无缝运行，但整个过程对我来说有点卡顿。可能不是实现该功能的最佳方式，但这是我能想到的最好的方法。

查看这个示例以查看它的运行情况：jsfiddle。希望这可以帮助您。如果您有任何进一步的问题，请随时提问！

- Aaron