How to show/hide column(s) on complex header in a Data Table

Question

I have run into trouble while working with Data Tables with jQuery. I have a table with dynamic column header generation (which also determines the colspan value) and the actual complex header text.

I am then populating my data table with the data that I receive from an API.

Problem: Once the data table is loaded, I have used the Button's option show/hide columns but the problem is that I always receive the columns that are not in colspan or have exactly one column.

I wanted a solution where I could show/hide my column(s) based on my complex generated header.

Sample structure:

<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>

So basically my question is that I want to show/hide column based on my Main Header but when I initialize the show/hide feature of data table using Buttons, it always catches the sub headers and only those main headers whose colspan is 0.

Working fiddle: https://jsfiddle.net/k0afsmzt/

I am trying to show/hide columns based on Main Header(s) but the data tables plugin only shows the sub headers when you click the column visibility button.

Answer 1

You try to show/hide the columns but not the headers .
(I assume that because how would the user unhide the columns, if not?)

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

I agree. So I made something I hope you will like.

Since I found that playing with DataTable's column().visible() simply is not rendering the "hidden" columns including the headers , and that is causing more new issues that it solves... I found an alternative way to achieve something close to your needs.

In the demo below, I played with the CSS visibility property. An additionnal advantage is that the table keeps it's original width all the time.

Now on table draw triggered by pagination or search... The columns hiding may not be kept all the time... I'm leaving you that fun to test it out with some real data over more than one dataTable's page.

I think that is a good starter. I coded way more than I should have... Play with it and customize it to your taste. If there is some more issue arising, post another question including what you tried to fix.

Also on CodePen .

Please run the snippet below in full page mode.

 $(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>