Datatables 1.10 sort only with clicks sort icons in th

Question

I am using datatables version 1.10. I have a requirement when

• when you click on the sorting icons (up and down arrows), sorting should work on the server side.
• when you click on th, sorting should work locally. This is because the user clicks an error by mistake, and the servers receive an unwanted burden.

Purpose: I wanted to keep both

• local sorting [clicking on the icon not the icons] (only for data currently displayed in the table / page)
• server-side sorting [only by clicking the icons].

PROBLEM: DataTables uses css background-image to sort. This makes it difficult to detect clicks on the icons, since css background-image cannot be captured by clicks on my knowledge.

This is what I came up with, but still did not have time

JSFIDDLE: http://jsfiddle.net/bababalcksheep/mae29pau/10/

JS:

$(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'); }); 

UPDATE-1:

JSFIDDLE: http://jsfiddle.net/bababalcksheep/mae29pau/14/

I managed to take it one step further by adding sortMask, and then bind it. sortMask is a div that is added to each column <thead> -> <tr> -> <th>

CSS

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

JS:

  $('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(); } }); 

Answer 1

I think the best solution here is a text wrapper, not an icon:

 <th><div>First name <div>abc</div></div></th> 

and

 $('th').on("click", function (event) { if($(event.target).is("div")) event.stopImmediatePropagation(); }); 

Please note: you should use regular click even instead of click.DT , because in this case it will be launched before DataTables alone.

http://jsfiddle.net/mae29pau/38/