2014-12-17 13 views
6

Utilizzo di jquery-datatables.jquery-datatables multi-column sort direction

Esempio: http://jsfiddle.net/b2fLye17/17/

$('#example').DataTable({ 

    filter:false, 
    columnDefs: [ 
        { 
         targets: [1],//when sorting age column 
         orderData: [1,2] //sort by age then by salary 
        } 
       ] 
}); 

Quando si sceglie la colonna di età, La tabella elenca per: ascendente età poi da stipendio ascendente.

Quali sarebbero le mie opzioni per renderlo ordinato in base all'età crescente e poi in base al salario decrescente?

Grazie!

-------------------------- Modifica 1 ------------------ ---

Chiarimento: quando la colonna età è ordinata in ordine ascendente, deve essere ordinata per età crescente e decrescente. Quando la colonna età è ordinata decrescente, deve essere ordinata per età decrescente e per stipendio crescente

-------------------------- Modifica 2 - --------------------

Una foto del risultato desiderato enter image description here

risposta

1

Eccolo. È leggermente compromesso, ma ho passato ORE a cercare di capire lo stesso obiettivo finale: l'ordinamento di due colonne. http://jsfiddle.net/b2fLye17/23/

<td data-age="40">$320</td> 
//In custom sort: 
var value = parseInt($(td).attr('data-age') + pad(td.innerHTML.substring(1), 10, '0')); 

Concetto: non ho trovato un modo per accedere ad altri cellule al di fuori della colonna nel ciclo foreach, così ho aggiunto una "dati-" attributo per la cellula che vogliamo ordinare off di. Questo attributo dati ha lo stesso valore dell'altra colonna di ordinamento di cui ci occupiamo ... quindi ci sono alcuni dati duplicati fino a quando non capiremo come accedere ad altre celle "adiacenti" nel ciclo.

Ho combinato i due valori (attributo nascosto e valore visibile) e poi riconvertito in int per essere indicizzato. Poiché i valori sono di lunghezza diversa, ho riempito la seconda colonna di zero (4086 vs 40086).

+0

Con il tuo esempio, sono stato in grado di risolvere il mio problema con alcuni aggiustamenti. Grazie mille! – sebmoi

2

Usa

$(document).ready(function() { 

    $('#example').DataTable({ 

     filter:false, 
     columnDefs: [ 
         { 
          orderData: [[1, 'asc'], [2, 'desc']]//sort by age then by salary 
         } 
        ] 
    }); 
}); 

JS Fiddle http://jsfiddle.net/b2fLye17/13/

+0

Non funziona come si può vedere in questo esempio. http://jsfiddle.net/b2fLye17/9/ Grazie per il tuo tempo! – sebmoi

+0

È necessario rimuovere gli obiettivi - risposta aggiornata –

+0

La rimozione degli obiettivi non consente di ordinare lo stipendio. Nell'esempio, sembrava che funzionasse perché lo stipendio delle persone a 40 anni era già stato ordinato nell'html. Ho cambiato 86 $ e 170 $ per testarlo. Esempio: http://jsfiddle.net/b2fLye17/14/ – sebmoi

1

È possibile eseguire var row = settings.aoData._aData[i]; per ottenere tutti i dati dalla riga e combinarli con la soluzione j0xue in modo da poterli ordinare in base a un'altra colonna senza aggiungere una proprietà nell'html.

1

Grazie per questa domanda anch'io affrontato lo stesso problema poi risolto, come di seguito

var oTable=$('#example').dataTable({ 
filter:false 
}); 

oTable.fnSort([[1,"asc"], [2,"desc"]]); 

speranza che questo sia utile