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>
        <div id="name_header">Name</div>
        <div id="sorting_buttons">
          <button id="name_button" type="button">Name</button>
          <button id="position_button" type="button">Position</button>
          <button id="office_button" type="button">Office</button>
          <button id="age_button" type="button">Age</button>
          <button id="date_button" type="button">Start date</button>
          <button id="salary_button" type="button">Salary</button>
        </div>
      </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>
     ...

JavaScript

$(document).ready(function() {
    var my_table = $('#example').DataTable( {
      responsive: {
        details: {
          display: $.fn.dataTable.Responsive.display.childRowImmediate
        }
      },
      order: [0, 'asc'],
      initComplete: function () {
        var data_table = this.api();
        show_hide_controls(data_table);
        var buttons = [
          {'id': 'name_button', 'col': 0, 'def': 'asc'},
          {'id': 'position_button', 'col': 1, 'def': 'asc'},
          {'id': 'office_button', 'col': 2, 'def': 'asc'},
          {'id': 'age_button', 'col': 3, 'def': 'desc'},
          {'id': 'date_button', 'col': 4, 'def': 'desc'},
          {'id': 'salary_button', 'col': 5, 'def': 'asc'}
        ];
        create_sorting_buttons(data_table, buttons);
      }
    } );

    function create_sorting_buttons(data_table, buttons) {
      buttons.forEach(function(button_entry) {
        var button = $('#' + button_entry['id']);      
        button.on('click', function(e) {
          var order = data_table.order();
          if (Array.isArray(order[0])) {
            //Even if not using muli column sorting, Datatables will sometimes
            //store an array of length 1
            //Please also make sure that you set order during initialization;
            //otherwise, order will be an array of zero length
            order = order[0];
          }
          var sorting = button_entry['def'];
          if (order[0] == button_entry['col']) {
            sorting = "asc";
            if (order[1] == "asc") {
              sorting = "desc";
            }
          }
          data_table.order([button_entry['col'], sorting]);
          data_table.draw();
          //This will avoid sorting by name on mobile view
          e.stopPropagation();        
        });
      });
    }

    function show_hide_controls(data_table_instance) {
      if (data_table_instance.responsive.hasHidden()) {
        //Some columns are hidden, so, show the controls and hide...