dataTable sort test

by Alen Subasic

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name
        <div class="sortMask"></div>
      </th>
      <th>Last name
        <div class="sortMask"></div>
      </th>
      <th>Position
        <div class="sortMask"></div>
      </th>
      <th>Office
        <div class="sortMask"></div>
      </th>
      <th>Start date
        <div class="sortMask"></div>
      </th>
      <th>Salary
        <div class="sortMask"></div>
      </th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

CSS

.sortMask {
   width: 19px;
   height: 19px;
   float: right;
   display: inline-block;
   z-index: 0;
   margin-right: -19px;
   background:red;
 }

JavaScript

$(document).ready(function() {
  //http://www.datatables.net/reference/api/
  var url = "http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2";
  //
  $('th').on("click.DT", function(e) {
    //stop Propagation if clciked outsidemask
    //becasue we want to sort locally here
    if (!$(e.target).hasClass('sortMask')) {
      e.stopImmediatePropagation();
    }
  });

  var table = $('#example').DataTable({
    "processing": true,
    "serverSide": false,
    "ajax": url
  });
  //
  //$('th').off('click.DT');


  table.column('2').order('asc');
  //
});