title: How to show/hide column(s) on complex header in a Data Table
body: <p>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.</p>
  
  <p>I am then populating my data table with the data that I receive from an API. </p>
  
  <p>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. </p>
  
  <p>I wanted a solution where I could show/hide my column(s) based on my complex generated header.</p>
  
  <p>Sample structure:</p>
  
  <pre><code>&lt;table&gt;
   &lt;thead&gt;
    &lt;tr&gt;
     &lt;th&gt;Main Header&lt;/th&gt;
     &lt;th colspan="2"&gt;Main Header 1&lt;/th&gt;
     &lt;th colspan="5"&gt;Main Header 2&lt;/th&gt;
     &lt;th colspan="3"&gt;Main Header 3&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;Sub Header&lt;/td&gt;
     &lt;td&gt;Sub Header 1&lt;/td&gt;
     &lt;td&gt;Sub Header 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;!-- DATA FOR TABLE GOES HERE --&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Working fiddle: <a href="https://jsfiddle.net/k0afsmzt/" rel="nofollow noreferrer">https://jsfiddle.net/k0afsmzt/</a></p>
  
  <p>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.</p>