title: Datatables 1.10 sort only by cliking sort icons in th
body: <p>I am using <a href="https://datatables.net/" rel="nofollow noreferrer">datatables</a> version 1.10.
  I have a requirement where </p>
  
  <ol>
  <li>when clicked on sort icons (up and down arrows) sorting should work server side</li>
  <li>when clicked on th , sorting should work locally.This is because user clicks on thead by mistake and servers gets unwanted burden.</li>
  </ol>
  
  <p><strong>Objective:</strong>
  I wanted to keep both </p>
  
  <ol>
  <li>local sorting [clicking thead not icons](only for data currently in table display/page)</li>
  <li>server side sorting [only by clicking icons].</li>
  </ol>
  
  <p><strong>THE PROBLEM:</strong>
  DataTables uses css background-image for sorting. This makes it difficult to detect click on icons since css background-image can not be captured on clicks as per my knowledge.</p>
  
  <p>This is what i have come up with but still no progress</p>
  
  <p><strong>JSFIDDLE:</strong> <a href="http://jsfiddle.net/bababalcksheep/mae29pau/10/" rel="nofollow noreferrer">http://jsfiddle.net/bababalcksheep/mae29pau/10/</a></p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(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 (event) {       
          event.stopImmediatePropagation();
      });
  
      var table = $('#example').DataTable({
          "processing": true,
              "serverSide": false,
              "ajax": url
      });
      //
      //$('th').off('click.DT');
      // sort internally
      table.column('2').order('asc');
  });
  </code></pre>
  
  <p><strong>UPDATE-1:</strong></p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/bababalcksheep/mae29pau/14/" rel="nofollow noreferrer">http://jsfiddle.net/bababalcksheep/mae29pau/14/</a></p>
  
  <p>I was able to go one step ahead by adding a sortMask and then bind a click on it.
  sortMask is a div which id added to each column  <code>&lt;thead&gt; -&gt; &lt;tr&gt; -&gt; &lt;th&gt;</code></p>
  
  <p><img src="https://i.stack.imgur.com/PUfaM.png" alt="enter image description here">
  <strong>CSS:</strong></p>
  
  <pre><code>.sortMask {
      width:19px;
      height:19px;
      float:right;
      display:inline-block;
      z-index:0;
      margin-right: -19px;
      /*background:red;*/
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>    $('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();
          }
      });
  </code></pre>