L'ordinamento di una tabella (table sorting) con jQuery richiede l'uso del metodo JavaScript sort()
dell'oggetto Array
. Per impostazione predefinita, questo metodo restituisce un ordinamento naturale degli elementi di un array. Tuttavia, questo metodo accetta anche una funzione di callback con cui è possibile modificare il tipo di ordinamento restituito. Vedremo infatti come usare questo metodo per ordinare le colonne di una tabella alfabeticamente.
Abbiamo una tabella a due colonne contenente titoli e registi di alcuni film. Quello che dobbiamo fare è questo:
- trasformare gli elementi
tr
della tabella in un array usando il metodoget()
- usare il metodo
sort()
sulle righe ottenute paragonando tra di loro i contenuti testuali delle prime celle di ciascuna riga (se stiamo selezionando la prima colonna) o delle seconde celle di ciascuna riga (se stiamo selezionando la seconda colonna) - usare il metodo
append()
sull'array ordinato di righe aggiungendo ciascuna riga al corpo della tabella.
Ciascuna intestazione della tabella contiene un link che, una volta cliccato, eseguirà le azioni citate:
$(document).ready(function() {
$('#movies #title').click(function(e) {
var rows = $('#movies tbody tr').get();
rows.sort(function(a, b) {
var A = $(a).children('td').eq(0).text().toUpperCase();
var B = $(b).children('td').eq(0).text().toUpperCase();
if(A < B) {
return -1;
}
if(A > B) {
return 1;
}
return 0;
});
$.each(rows, function(index, row) {
$('#movies').children('tbody').append(row);
});
e.preventDefault();
});
$('#movies #director').click(function(e) {
var rows = $('#movies tbody tr').get();
rows.sort(function(a, b) {
var A = $(a).children('td').eq(1).text().toUpperCase();
var B = $(b).children('td').eq(1).text().toUpperCase();
if(A < B) {
return -1;
}
if(A > B) {
return 1;
}
return 0;
});
$.each(rows, function(index, row) {
$('#movies').children('tbody').append(row);
});
e.preventDefault();
});
});
L'ordinamento tramite sort()
prevede che i contenuti testuali delle celle vengano normalizzati trasformando tutte le lettere in lettere maiuscole. Tale metodo restituirà -1, 1 o 0 a seconda del risultato ottenuto dalla comparazione (0 indica che le stringhe sono uguali). Potete visionare l'esempio finale in questa pagina.