dataTable sort test

by FirstBug

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">
            </th>
            <th>Position
                <div class="sortMask">
            </th>
            <th>Office
                <div class="sortMask">
            </th>
            <th>Start date
                <div class="sortMask">
            </th>
            <th>Salary
                <div class="sortMask">
            </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;
     opacity:0.2;
 }

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) {
        var ele = $(this);
        //stop Propagation if clicked outside sortMask
        //becasue we want to sort locally here
        if (!$(e.target).hasClass('sortMask')) {
            e.stopImmediatePropagation();
            if (ele.hasClass('sorting')) {
                ele.removeClass().addClass('sorting_asc');
            } else if (ele.hasClass('sorting_asc')) {
                ele.removeClass().addClass('sorting_desc');
            } else if (ele.hasClass('sorting_desc')) {
                ele.removeClass().addClass('sorting_asc');
            }
        }
    });

    var table = $('#example').DataTable({
        "processing": true,
            "serverSide": true,
            "ajax": url
    });
    table.column('2').order('asc');
    //
});