如何从复选框设置列以过滤数据表 jQuery

Question

我使用数据表，并尝试进行过滤，问题是我想从复选框中选择我需要过滤的列。

因此，如果我选择一列，我会得到 4 或 5 列，但我选择了 1，我可以找到问题所在。 [![在此处输入图像描述][1]][1]

正如你在图片上看到的，我只选择了一个Stantion 代码，但我有 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);
});

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 。 希望这可以帮助你。 如果您有任何其他问题，请随时问他们！