DataTables ColVis in button

The column visibility button displays the total number of columns and the visible number of columns.

by Dirk Drijkoningen

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.0.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js"></script>
<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>

    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$4,800</td>
      </tr>
      <tr>
        <td>Cedric Kelly</td>
       ...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    "dom": 'B<"top"lf>rt<"bottom"ip><"clear">',
    "columnDefs": [{
      targets: [3, 4],
      visible: false
    }, {
      targets: '_all',
      visible: true
    }],
    "buttons": [{
      extend: 'colvis',
      text: function() {
        var totCols = $('#example thead th').length;
        //Total columns minus Initial number of columns with visibility set to false
        var shownCols = totCols - 2;
        return 'Column visibility (' + shownCols + ' of ' + totCols + ')';
      },
      prefixButtons: [{
        extend: 'colvisGroup',
        text: 'Show all',
        show: ':hidden'
      }, {
        extend: 'colvisRestore',
        text: 'Restore'
      }]
    }],
    "initComplete": function(settings, json) {
      //Add events when clicked on the visibility buttons
      $('#example').on('column-visibility.dt', function(e, settings, column, state) {
        var parentID = $(this).parent().attr('id');
        var dtID = parentID.substring(0, parentID.indexOf('_wrapper'));
        var visCols = $('#' + dtID + ' thead tr:first th').length;
        //Minus 2 because of the 2 extra buttons Show all and Restore
        var totCols = $('.dt-button-collection a[aria-controls=' + dtID + ']').length - 2;
        $('.buttons-colvis[aria-controls=' + dtID + '] span').html('Column visibility (' + visCols + ' of ' + totCols + ')');
        e.stopPropagation();
      });
    }

  });


});