title: Datatable - show/hide column group dynamically based on the selected option
body: <p>I am using Jquery datatable in my application. My table contains the below mentioned columns:</p>
  
  <p>Name, Office, A1, B1, Diff1, A2, B2, Diff2, A3, B3, Diff3, A4, B4, Diff4</p>
  
  <p>Also I have a select box with the following options:
  1. All 2. Diff1 3. Diff2 4. Diff3 5. Diff4</p>
  
  <p>I am in need to display the datatable column groups dynamically based on the dropdown selection. That is 
  1. <strong>All</strong> (All columns)
  2. <strong>Diff1</strong> (Name, Office, A1, B1, Diff1)
  3. <strong>Diff2</strong> (Name, Office, A2, B2, Diff2)
  4. <strong>Diff3</strong> (Name, Office, A3, B3, Diff3)
  5. <strong>Diff4</strong> (Name, Office, A4, B4, Diff4)</p>
  
  <p>I have added my example in this <a href="https://jsfiddle.net/cpvcLa4h/13/" rel="nofollow noreferrer">JSFiddle</a> link. Here my requirement is working only for the first time. If I change the dropdown again, expected column groups was not displaying. How to fix this?</p>
  
  <p><strong>HTML Code</strong>:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label&gt;Column Filter:&lt;/label&gt;
          &lt;select id="myCol"&gt;
        &lt;option value="0"&gt;All&lt;/option&gt;
        &lt;option value="1"&gt;Diff1&lt;/option&gt;
        &lt;option value="2"&gt;Diff2&lt;/option&gt;
        &lt;option value="3"&gt;Diff3&lt;/option&gt;
      &lt;/select&gt;       
  &lt;/div&gt;
  
  &lt;table id="example" class="display" style="width:100%"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
                  &lt;th&gt;A1&lt;/th&gt;
                  &lt;th&gt;B1&lt;/th&gt;
                  &lt;th&gt;Diff1&lt;/th&gt;
                  &lt;th&gt;A2&lt;/th&gt;
                  &lt;th&gt;B2&lt;/th&gt;
                  &lt;th&gt;Diff2&lt;/th&gt;
                  &lt;th&gt;A3&lt;/th&gt;
                  &lt;th&gt;B3&lt;/th&gt;
                  &lt;th&gt;Diff3&lt;/th&gt;
                  &lt;th&gt;A4&lt;/th&gt;
                  &lt;th&gt;B4&lt;/th&gt;
                  &lt;th&gt;Diff4&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;Tiger Nixon&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
                  &lt;td&gt;67&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;12&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                  &lt;td&gt;91&lt;/td&gt;
                  &lt;td&gt;32&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;11&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Garrett Winters&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
                  &lt;td&gt;67&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;12&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                  &lt;td&gt;91&lt;/td&gt;
                  &lt;td&gt;32&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;11&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Tiger Nixon&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
                  &lt;td&gt;67&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;12&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                  &lt;td&gt;91&lt;/td&gt;
                  &lt;td&gt;32&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;11&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Garrett Winters&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
                  &lt;td&gt;67&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;12&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                  &lt;td&gt;91&lt;/td&gt;
                  &lt;td&gt;32&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;11&lt;/td&gt;
              &lt;/tr&gt;
               &lt;tr&gt;
                  &lt;td&gt;Tiger Nixon&lt;/td&gt;
                  &lt;td&gt;Edinburgh&lt;/td&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
                  &lt;td&gt;67&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;12&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                  &lt;td&gt;91&lt;/td&gt;
                  &lt;td&gt;32&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;11&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Garrett Winters&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;13&lt;/td&gt;
                  &lt;td&gt;21&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;89&lt;/td&gt;
                  &lt;td&gt;67&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
                  &lt;td&gt;12&lt;/td&gt;
                  &lt;td&gt;39&lt;/td&gt;
                  &lt;td&gt;91&lt;/td&gt;
                  &lt;td&gt;32&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;11&lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>JS Code</strong>:</p>
  
  <pre><code>$(document).ready(function() {
      var table = $('#example').DataTable( {
          "scrollY": "200px",
          "paging": false
      } );
  
      $(document).on("change","#myCol",function(event){
      var selCol = $(this).val();
     if(selCol == 1){
         table.columns( [0, 1, 2, 3, 4 ] ).visible( true);
         table.columns( [5,6,7,8,9,10,11,12,13] ).visible( false);
      } else if(selCol == 2){
         table.column([0, 1, 5, 6, 7]).visible(true);
         table.columns( [2,3,4,8,9,10,11,12,13] ).visible( false);
      } else if(selCol == 3){
         table.column([0,1,8, 9, 10]).visible(true);
         table.columns( [2,3,4,5,6,7,11,12,13] ).visible( false);
      } else if(selCol == 4){
         table.column([0,1,11,12,13]).visible(true);
         table.columns( [2,3,4,5,6,7,8,9,10] ).visible( false);
      } else {
         table.column([0,1,2,3,4,5,6,7,8,9,10,11,12,13]).visible(true);
      }
  
      table.columns.adjust().draw( false );
      });
  } );
  </code></pre>