title: DataTables: Is it possible to dynamically change the columns of a Datatable to view, based on the selections in the dropdown?
body: <p>I have a DataTable, where in I want to have a dropdown which has a list of the columns names of the DataTable with checkboxes. Based on the selections in the checkbox, the DataTable should be updated with only those columns. 
  Here is my <a href="https://jsfiddle.net/eakwswfe/" rel="nofollow">JsFiddle</a> tryin to achieve the same.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="button-group"&gt;
           &lt;button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt; Modify Columns&lt;/button&gt;
           &lt;ul class="dropdown-menu" id="checkboxlist"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>AList = ["A", "B"];
      var selected = [];
      var sortlist = [];
      for (var i = 0; i &lt; header.length; i++) {
          AList.push(header[i]);
      }
      $('#example').append("&lt;thead style='background-color: rgb(159, 191, 223); !important'&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/thead&gt;");
      for (var i = 0; i &lt; AList.length; i++) {
          $('#example thead tr').append("&lt;th style='background-color: rgb(159, 191, 223); !important'&gt;" + AList[i] + "&lt;/th&gt;");
  $('#checkboxlist').append(' &lt;li&gt;&lt;a href="#" class="small" data-value="'+AList[i]+'" tabindex="-1"&gt;&lt;input type="checkbox" /&gt;' +AList[i] + '&lt;/a&gt;&lt;/li&gt;')
  
      }
      $('#example').append("&lt;tbody&gt;&lt;/tbody&gt;");
      $('#checkboxlist').append('&lt;li&gt;&lt;button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"&gt; Update&lt;/button&gt;&lt;/li&gt;');
  </code></pre>
  
  <p>Any suggestions on how to go about this?</p>