如何在数据表中的复杂标题上显示/隐藏列

Question

使用jQuery处理数据表时遇到麻烦。 我有一个带有动态列标题生成表（它也确定colspan值）和实际的复杂标题文本的表。

然后，用从API接收的数据填充数据表。

问题：加载数据表后，我使用了Button的show / hide列选项，但问题是我总是收到不在colspan或只有一列的列。

我想要一个解决方案，可以根据我生成的复杂标题显示/隐藏我的列。

样本结构：

<table>
 <thead>
  <tr>
   <th>Main Header</th>
   <th colspan="2">Main Header 1</th>
   <th colspan="5">Main Header 2</th>
   <th colspan="3">Main Header 3</th>
  </tr>
  <tr>
   <td>Sub Header</td>
   <td>Sub Header 1</td>
   <td>Sub Header 2</td>
  </tr>
</thead>
<!-- DATA FOR TABLE GOES HERE -->
</table>

所以基本上我的问题是我想基于主标题显示/隐藏列，但是当我使用Button初始化数据表的显示/隐藏功能时，它总是捕获子标题并且仅捕获colspan为0的那些主标题。

工作提琴： https : //jsfiddle.net/k0afsmzt/

我试图基于主标题显示/隐藏列，但是当您单击列可见性按钮时，数据表插件仅显示子标题。

Answer 1

您尝试显示/隐藏列， 但不显示标题 。
（我认为这是因为，如果没有，用户将如何取消隐藏列？）

...也没有足够的示例可供参考...

我同意。 所以我做了一些我希望你会喜欢的东西。

由于我发现使用DataTable的column（）。visible（）根本无法呈现包含标题的“隐藏”列，而这导致它可以解决更多新问题……我找到了另一种方法来实现接近您的需求。

在下面的演示中，我使用了CSS 可见性属性。 另一个好处是，桌子始终保持其原始宽度。

现在在由分页或搜索触发的表绘制上……隐藏的列可能不会一直保留着…… 我很乐意用一个以上dataTable的页面上的一些实际数据来测试它 。

我认为这是一个很好的起点。 我编码的方式超出了我应有的方式...尝试并根据您的喜好对其进行自定义。 如果出现其他问题，请发布另一个问题， 包括您尝试解决的问题。

同样在CodePen上 。

请以整页模式运行以下代码段。

 $(document).ready(function() { var myTable = $('#mytable').DataTable({ dom: 'Bfrtip', buttons: [ 'colvis' ], "drawCallback": function( settings ) { $("#mytable thead th").show(); } }); $('#mytable').on("click","th",function(){ console.clear(); // Get the TH column "from" var colFrom = parseInt($(this).data("col_from")); //console.log(colFrom); // Get the TH column "to" var colTo = parseInt($(this).data("col_to")); //console.log(colTo); // Toggle the columns under the TH for(i=colFrom;i<colTo+1;i++){ //myTable.column( i ).visible( !myTable.column( i ).visible() ); $("#mytable tbody tr").each(function(){ var TD = $(this).find("td").eq(i); // Toggle visibility var toggleCol = (TD.css("visibility")=="visible") ? "hidden" : "visible"; console.log("TOGGLING COL# "+i+" to "+toggleCol); TD.css({"visibility":toggleCol}) }); } }); }); 

 table{ border:0px !important; } th,td{ border:1px solid black !important; } thead th{ cursor:pointer; } 

 <!--link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=19472395a2969da78c8a4c707e72123a"--> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script> <!-- Main Table Structure --> <table id="mytable"> <thead> <tr> <th data-col_from="0" data-col_to="0">Main Header</th> <th colspan="2" data-col_from="1" data-col_to="2">Main Header 1</th> <th colspan="4" data-col_from="3" data-col_to="6">Main Header 2</th> </tr> <tr> <td>Sub Header 0</td> <td>Sub Header 1</td> <td>Sub Header 2</td> <td>Sub Header 3</td> <td>Sub Header 4</td> <td>Sub Header 5</td> <td>Sub Header 6</td> </tr> </thead> <tbody> <tr> <td>Sample Data 0</td> <td>Sample Data 1</td> <td>Sample Data 2</td> <td>Sample Data 3</td> <td>Sample Data 4</td> <td>Sample Data 5</td> <td>Sample Data 6</td> </tr> </tbody> <!-- DATA FOR TABLE GOES HERE --> </table>