DataTables - Column Toggle

JavaScript Source Code

  $(document).ready(function() {
    var table = $('#example').DataTable();
  
    // build tag section
    var totalColumns = table.columns().count();
    var $toggleSection = $('<div class="datatable-column-toggles tag-group"></div>');
    for (var i=0; i < totalColumns; i++) {
      $toggleSection.append('<div class="tag tag-active tag-checkmark-btn toggle-vis" data-column="' + i + '">' + $(table.column(i).header()).text() + '</div>');
    }
    $toggleSection.prepend('Toggle columns: ');
    $('.dataTables_wrapper').before($toggleSection);
  
    $('.toggle-vis').on( 'click', function (e) {
      e.preventDefault();
  
      // Get the column API object
      var dataColumn = $(this).attr('data-column');
      var column = table.column(dataColumn);
      //var columnTitle = $(table.column(dataColumn).header()).text();
      //var totalColumns = table.columns().count();
  
      // Toggle the visibility
      column.visible( ! column.visible() );
  
      // Update tag
      if (column.visible()) {
        $(this).removeClass('tag-close-btn tag-border-n4 text-n4');
        $(this).addClass('tag-checkmark-btn');
      } else {
        $(this).removeClass('tag-checkmark-btn');
        $(this).addClass('tag-close-btn tag-border-n4 text-n4');
      }
  
    } );
  } );

Table Source Code

<table class="table responsive">

Name	Other Names	Titles	Affiliation	Race	Weapon	Steed
Bilbo Baggins	Mr. Lucky Number, Bilbo the Magnificent, Bilba Labingi	Burglar, Thief, Clue-finder, Web-cutter, Stinging Fly, Ringwinner, Luckwearer, Child of the Kindly West, Barrel-rider, Elf-friend, Mad Baggins, Ring-bearer	Thorin and Company	Hobbit	Sting
Merriadoc Brandybuck	Merry, "the Magnificent", Kalimac Brandagamba	Master of Buckland	Fellowship of the Ring	Hobbit	Dagger of Westernesse	Stybba
Gandalf	Olórin, Mithrandir, Incánus, Tharkûn, The White Rider, Greyhame, Stormcrow, Old Grey Beard, Big Grey Beard, The White Pilgrim, Láthspell	The Grey, The White	Istari (Wizards), White Council, Thorin and Company, Fellowship of the Ring	Maia	Staff, Glamdring, Narya	Shadowfax
Frodo Baggins	Mr. Underhill, The Halfling, Frodo of the Nine Fingers, Iorhael, Maura Labingi	Ring-bearer, Elf-friend, Master, Deputy Mayor of Michel Delving, Daur	Fellowship of the Ring	Hobbit	Sting	Strider
Peregrin Took	Pippin, Fool of a Took, Ernil i Pheriannath, Thain Peregrin I, Razanur Tûk	Thain, Knight of Gondor, Guard of the Citadel, Counsellor of the North-kingdom	Fellowship of the Ring	Hobbit	Dagger of Westernesse
Aragorn	Aragorn II, Elessar, Strider, Thorongil	Chieftain of the Dúnedain, King of the Reunited Kingdom	Fellowship of the Ring	Arnorian	Andúril	Roheryn and Hasufel
Boromir		Captain of the White Tower, High Warden of the White Tower, Captain-General	Fellowship of the Ring	Gondorian	Sword
Samwise Gamgee	Banazîr	Mayor of Michel Delving	Fellowship of the Ring	Hobbit	Dagger of Westernesse, Sting	Bill
Legolas	Greenleaf	Prince of Woodland Realm	Fellowship of the Ring	Sinda	Bow and long white knife