Question

目前我的DataTable

<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 =＆＃34; table＆＃34;。

的元素

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

DataTable列可见性

1 个答案: