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

我在使用jQuery处理数据表时遇到了问题。我有一个表，其中包含动态列标题生成（它还确定colspan值）和实际的复杂标题文本

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

问题：加载数据表后，我使用了按钮的“显示/隐藏列”选项，但问题是我总是接收不在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>

主割台
主收割台1
主集管2
主集管3
副标题
副标题1
副标题2

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

工作小提琴：

---

我正在尝试基于主标题显示/隐藏列，但单击列可见性按钮时，“数据表”插件仅显示子标题。

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

。。。也没有足够的例子可供参考

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

因为我发现使用DataTable并不是简单地呈现“隐藏”列，包括标题，这导致了它解决的更多新问题。。。我找到了另一种方法来实现接近你需要的东西

在下面的演示中，我使用了CSS属性。另外一个优点是表格始终保持其原始宽度

现在由分页或搜索触发的表格绘制。。。隐藏的列可能不会一直保留我给您留下了一个有趣的机会，让您在多个dataTable页面上使用一些真实数据进行测试

我认为这是一个很好的开端。我写的比我应该写的多。。。使用它，并根据您的口味进行定制。如果出现其他问题，请发布另一个问题，包括您试图解决的问题

还有

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

$（文档）.ready（函数（）{
var myTable=$（'#myTable'）.DataTable({
dom:'Bfrtip'，
按钮：[
“科尔维斯”
],
“drawCallback”：函数（设置）{
$（“#mytable thead th”）.show（）；
} 
});
$（'#mytable'）。在（“单击”，“th”，函数（）上）{
console.clear（）；
//获取第列“from”
var colFrom=parseInt（$（this）.data（“col_from”）；
//console.log（colFrom）；
//获取第列“to”
var colTo=parseInt（$（this）.data（“col_to”）；
//console.log（colTo）；
//切换TH下的列
for（i=colFrom；i
Datatable是一个动态呈现新元素的插件。当您使用分页、筛选等功能时，每次都会绘制新元素。我建议您仔细阅读并尝试一些东西。这里没有您尝试的代码，而且问题/要求也不清楚。--投票关闭太棒了。@LouySpatriceBesette我是s如果我的问题不清楚的话，我很抱歉。基本上，我想问的是，是否有一种方法可以基于跨越多个子列的复杂标题来显示/隐藏列。我无法显示我的尝试，因为数据是敏感的，因此我创建了一个演示表示例来说明我正在尝试做的事情。然后，请尽可能靠近y发布一个工作演示我们的真实表格。您可以使用他们称之为的——最好是——或外部网站，如或——来完成。请包括您的尝试。因此，这不是编码服务。我们可以提供帮助，但不能根据要求进行编码。；）@Louyspatricebesette收到！我有一个小提琴示例为您工作。如果您看到列可见性按钮，则只返回显示/隐藏列的子标题。我正在尝试隐藏主标题上的列。小提琴工作：我只对“示例数据”进行了编号，就像子标题（0到6）一样还玩了列可见性按钮。我看不出有什么问题。