如何从复选框列中设置数据表jQuery中的筛选？

Question

我使用jQuery DataTable库，并希望设置用于从复选框中筛选的列。

在我的示例中，我设置了需要表单复选框的列，如果选择I列，则自动设置4，但不设置所需的列。

所以，如果我只选择一个列进行过滤，我得到了4个，并且过滤器没有被正确地创建。可能是什么原因？

​

​

正如上面的图片所示，我设置了站点名称，但是我没有得到这个过滤器，但是其他4个过滤器，我不明白为什么？

我的代码：JSFiddle

联署材料：

var idTable = $(".custom-style").attr('id');
var table = $('#' + idTable + '').DataTable();

function addSpliting(val) {
  table.destroy();
  $(idTable).DataTable({
    searchPanes: {
      layout: 'columns-4',
    },
    dom: 'Pfrtip',
    columnDefs: [{
      searchPanes: {
        show: true,
      },
      targets: ['' + val + ''],
    }]
  });
}

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 checkedIds = $(".checkbox:checked").map(function() {
    return this.id;
  }).toArray();
  addSpliting(checkedIds.join(", "));
});

Answer 1

实际上，你们关系很好。问题是columnDefs的目标选项只接受以下内容：

• 整数(正数或负数)
• 字符串(类名)
• 字符串"_all“(所有列)
• 一个整数数组

您正在发送一个字符串数组。

因此，您只需对代码进行2次更改：

1-在createFilter的“单击”事件中，创建一个整数数组而不是字符串数组。

$("#createFilter").on("click", function() {

    var columnFilters = [];

    $('.checkbox:checked').each(function () {
        columnFilters.push(parseInt($(this).attr('id')));
    });
    addSpliting(columnFilters);
});

2-在jQuery DataTable初始化中，更改以下内容：

targets: ['' + val + '']

在这方面：

targets: val

下面是一个有用的示例(我对您的代码做了一些修改)：

​

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);
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/1.2.0/css/searchPanes.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/searchpanes/1.2.0/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.min.js"></script>

<div class="content-container">
    <h2 class="head-of-editor">Filtering settings:</h2>
    <div class="checkBoxes"></div>
    <br />
    <a class="button button-clear" id="createFilter" href="#">Create filter</a><br><br>
</div>

<table class="custom-style" id="test1">
   <thead class="table-head">
      <tr>
         <th>Station code</th>
         <th>Station name</th>
         <th>Station type</th>
         <th>Description</th>
         <th>Belongs to production resource(s)</th>
         <th>Main production resource</th>
         <th></th>
      </tr>
   </thead>
   <tr>
       <td>a</td>
       <td>b</td>
       <td>c</td>
       <td>a</td>
       <td>b</td>
       <td>c</td>
       <td></td>
   </tr>
   <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
   </tr>
   <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
   </tr>
 </table>

​