title: toggle visibility script for datatables?
body: <p>i found this here is a very simple script to dynamically add toggle buttons based on table thead content in a div on top of the table and bind a click to toggle visibility for each. I want to  add name in it instead of index number can anyone help.</p>
  
  <pre><code>$(document).ready(function() {
  var table = $('#example').DataTable();
  
      // for each column in header add a togglevis button in the div
      $("#example thead th").each( function ( i ) {
          var name = table.column( i ).header();
          var spanelt = document.createElement( "button" );
          spanelt.innerHTML = name.innerHTML;                     
  
          $(spanelt).addClass("colvistoggle");
          $(spanelt).attr("colidx",i);        // store the column idx on the button
  
          $(spanelt).on( 'click', function (e) {
              e.preventDefault(); 
              // Get the column API object
              var column = table.column( $(this).attr('colidx') );
               // Toggle the visibility
              column.visible( ! column.visible() );
          });
          $("#colvis").append($(spanelt));
      });
  } );
  &lt;div id="colvis"&gt;&lt;/div&gt;
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
      &lt;!-- here your col header --&gt;
      &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;!-- here your table data --&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>