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

Question

我在使用 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>

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

工作 fiddle :https://jsfiddle.net/k0afsmzt/

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

Answer 1

您尝试显示/隐藏列但不显示标题。
(我假设是因为如果不隐藏用户将如何取消隐藏列？)

... there are also not enough examples for reference...

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

自从我发现玩DataTable的column().visible()只是没有渲染“隐藏”列包括标题，这导致了它解决的更多新问题......我找到了一种替代方法来实现接近您的需求的东西。

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

现在在由分页或搜索触发的表格绘制上...隐藏的列可能不会一直保留...我将让您用一些真实数据来测试它的乐趣超过一个数据表的页面。

我认为这是一个很好的开始。我编写的代码比我应该编写的要多......尝试一下并根据您的口味定制它。如果出现更多问题，请发布另一个问题包括您尝试解决的问题。

同时在 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>