Showing / hidding column on resposive-resize

Based on zero configuration example.

by jmeile

HTML

<script src="https://cdn.datatables.net/v/dt/dt-1.11.3/r-2.2.9/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th class="desktop tablet-l">Position</th>
      <th class="desktop tablet-l">Office</th>
      <th class="desktop tablet-l">Age</th>
      <th class="desktop tablet-l">Start date</th>
      <th class="desktop tablet-l">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
 ...

JavaScript

$(document).ready(function() {
    var my_table = $('#example').DataTable( {
      responsive: {
        details: {
          display: $.fn.dataTable.Responsive.display.childRowImmediate
        }
      },
      columns: [
          null,
          null,
          null,
          { "visible": false },
          null,
          null
      ],
      initComplete: function () {
        show_hide_column();
      }
    } );
       
    function show_hide_column() {
      if (my_table.responsive.hasHidden()) {
        //Some columns are hidden, so, show the controls
        my_table.columns( [3] ).visible( true );
      } else {
        //No columns are hidden, so, hide the controls
        my_table.columns( [3] ).visible( false );
      }
    }
    
    /* Part of this code was gotten from:
     * - Datatables on-the-fly resizing
     *   https://stackoverflow.com/a/12391296
     */
    $(window).resize(function() {
      clearTimeout(window.refresh_size);
      window.refresh_size = setTimeout(function() { show_hide_column(); }, 250);
    });

} );