如何從復選框設置列以過濾數據表 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 。 希望這可以幫助你。 如果您有任何其他問題，請隨時問他們！