Datatables 1.10 ordina solo facendo clic sulle icone di ordinamento in

Question

Sto usando datatables versione 1.10. Ho un requisito dove

1. quando si fa clic sulle icone di ordinamento (frecce su e giù) l'ordinamento dovrebbe funzionare lato server
2. quando si fa clic su Th, l'ordinamento dovrebbe funzionare locally.This è perché utente fa clic sul thead per errore e i server ottengono un carico indesiderato.

Obiettivo: Ho voluto mantenere sia

1. ordinamento locale [cliccando thead non icone] (solo per i dati attualmente in tabella di visualizzazione/pagina)
2. lato server di smistamento [solo da facendo clic sulle icone].

IL PROBLEMA: css background-image DataTable utilizza per l'ordinamento. Ciò rende difficile rilevare il clic sulle icone poiché lo sfondo-immagine css non può essere catturato sui clic come da mia conoscenza.

Questo è quello che ho messo a punto, ma ancora nessun progresso

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/

Sono riuscito a fare un passo avanti aggiungendo una sorta di maschera e quindi associare un clic su di esso. sortMask è un div, che id aggiunto ad ogni colonna <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

Penso che la soluzione migliore è quella di avvolgere il testo non l'icona:

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

E:

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

Si prega di notare: si dovrebbe usare il normale click anche al posto di click.DT perché in questo caso sarà licenziato prima DataTables uno.

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