javascript - 数据表列可见性

Question

目前我的数据表

<table id='table' class="display hover row-border">
<thead>
    <tr>
      <th class="group1">Oranges</th>
      <th class="group1">Bananas</th>
      <th class="group1">Melons</th>
      <th class="group1">Tangerines</th>
      <th class="group1">Apple</th>
      <th class="group2">Cucumber</th>
      <th class="group2">Tomatoo</th>
      <th class="group2">Pepper</th>
    </tr>
</thead>

我已将我的列分为两类，并将它们放入以下 ​​div 中。

<li>
<h5> Category 1</h5>
<div id="buttons-group1"></div>
</li>       

<li>
<h5> Category 2</h5>
<div id="buttons-group2"></div>
</li>

我遇到的问题是，我似乎只能控制顶部类别中列的默认可见性，在本例中为类别 1。因为我只希望类别 1 中的五列中的两列成为页面加载时显示的第二个类别似乎有自己的生命。

如果我将类别 2 移至类别 1 之上，我将能够控制类别 2，但不能控制类别 1 等。

有什么想法吗？

将切换按钮分配给组 div:

$(document).ready(function (){
    var table = $('#test_table').DataTable();   

    var buttons1 = new $.fn.dataTable.Buttons(table, {
        buttons: [
            {
                extend: 'columnsToggle',
                columns: '.group1'
            }, 
        ]
    }).container().appendTo($('#buttons-group1'));

    var buttons2 = new $.fn.dataTable.Buttons(table, {
        buttons: [
            {
                extend: 'columnsToggle',
                columns: '.group2'
            }, 
        ]
    }).container().appendTo($('#buttons-group2'));
   });

我当前用于切换按钮的 JavaScript 如下所示

function DefaultButtons()
  {
    var table = document.querySelector('#table');
    var buttons = document.querySelector('.dt-buttons');
    var allButtons = buttons.getElementsByTagName("a");
    for (var i = 0; i < allButtons.length; i++) 
    { 
      var button = allButtons[i]; 
      var name = button.getElementsByTagName('span')[0].textContent; 
      if(name != 'Oranges' && name != 'Bananas')
      {
        console.log(name);
        button.click(); 
      }
    }
  } 

**编辑:**更新了我的代码。

Answer 1

$('#table')

表示您想要获取 id="table"的元素。

看起来两个表都有相同的 id。