Sorting buttons for responsive mode

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">
<!-- For each button you need to define this attributes:
  * data-column: zero based index of the column that this button
    will set the order to
  * data-sorting: the direction of the default sorting; either
    "asc" (ascendent) or "desc" (descendent)
-->
<div id="sorting_buttons">
  <button type="button" data-column="0" data-sorting="asc">Name</button>
  <button type="button" data-column="1" data-sorting="asc">Position</button>
  <button type="button" data-column="2" data-sorting="asc">Office</button>
  <button type="button" data-column="3" data-sorting="desc">Age</button>
  <button type="button" data-column="4" data-sorting="desc">Start date</button>
  <button type="button" data-column="5" data-sorting="asc">Salary</button>
</div>
<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...

CSS

/* Sorting arrows */
.jm_sorting, .jm_sorting_asc, .jm_sorting_desc {
  background-position: 100% 50%;
  background-repeat: no-repeat;
  padding-right: 20px;
  background-color: #fff;
}

.jm_sorting {
  background-image: url("https://cdn.datatables.net/1.11.3/images/sort_both.png") !important;
}

.jm_sorting_asc {
  background-image: url("https://cdn.datatables.net/1.11.3/images/sort_asc.png") !important;
}

.jm_sorting_desc {
  background-image: url("https://cdn.datatables.net/1.11.3/images/sort_desc.png") !important;
}

#sorting_buttons {
  clear: both;
  padding-top: 20px;
  padding-bottom: 10px;
}

JavaScript

//This will be used by the click header event to keep track
//of the prviously ordered column.
//I would like to use something like a mousedown event, but
//unfortuantelly if I use it, the event will be triggered
//after DataTables already changed the order, so, I won't
//know what was set before
var jm_previous_order= [];
  
$(document).ready(function() {
  //This will be done for indexing the buttons by column,
  //so that you can get them easilly afterwards
  var buttons_by_column = {};

  var my_table = $('#example').DataTable( {
    //Here I will add an empty div with the id: "header_buttons" after the
    //search input
    dom: 'lf<"#header_buttons">rtip',
    responsive: {
      details: {
        display: $.fn.dataTable.Responsive.display.childRowImmediate
      }
    },
    //You can set here the order to whatever column you want. You can also
    //omit it, which will be by default: [0, "asc"]. I just decided to not set
    //it to: [], which is the order given by the placement of the html tags
    order: [],
    //order: [0, 'asc'],
    //order: [1, 'desc'],
    initComplete: function () {
      var data_table = this.api();
      
      show_hide_controls(data_table);
      create_sorting_button_handlers(data_table);
      
      //This will replace the defined div: #header_buttons, which the one that
      //it is on the html code: #sorting_buttons. So that they will be placed
      //after the search input field
      $('#header_buttons').replaceWith($('#sorting_buttons'));
    }
  } );

  function get_order(data_table) {
    //This function will get the current data_table order. It will contemplate
    //the following cases:
    //* The order was set to [], which means take the html tag position, no
    //  ordering will be applied
    //* The DataTable order is only a two dimensional array, for example:
    //  [0, "asc"]
    //* The DataTable order is a multidimensional array. Here I'm not
    //  contemplating multiple column ordering; however,...