Nonostante le tabelle non si usino più con la stessa intensità del passato, per quanto riguarda la presentazione dei dati a volte possono essere indispensabili. Anche per questo motivo uno script dedicato alla loro gestione può risultare più che gradito dagli addetti ai lavori. Uno dei migliori in circolazione è TableSorter 2.0 ed in questo articolo provvederemo ad analizzarlo e spiegare il suo funzionamento in alcuni passi da seguire.
Innanzitutto l'installazione ed il primo utilizzo, per un "primo impatto". Dopodiché analizzeremo i parametri da dare come argomento durante il richiamo della funzione principale, per vedere come possiamo personalizzare il risultato in uscita. Infine qualche esempio più "avanzato" rispetto all'utilizzo semplice.
TableSorter si appoggia al jQuery Framework per svolgere il suo compito: nello specifico, consente di trasformare una tabella standard HTML in una più "dinamica" che consente l'ordinamento senza dover ricaricare tutta la pagina.
Presenta svariate features interessanti:
- Ordinamento sulla base di più colonne;
- Parser per vari tipi di dati (dal semplice testo agli indirizzi, numeri interi, currency per entità monetarie, indirizzi IP, date e indicatori d'orario;
- Supporto per il cosiddetto "hidden sorting" (ad esempio, mantenere l'ordine alfabetico mentre si ordina per un altro criterio);
- Possibilità di realizzare aggiunte tramite il Widget System;
- Testato su tutti i tipi di browser. Supportati Internet Explorer, Mozilla Firefox, Safari ed Opera;
- Dimensioni ridotte del file (il pacchetto per intero pesa 1.7MB, mentre la versione minified del plugin solo 17KB);
L'operazione di "installazione" è davvero semplice ed identica a quelle degli altri plugin per jQuery: per prima cosa si scarica il pacchetto ufficiale del progetto dalla pagina di download. A quel punto, una volta trasferito il file "jquery.tablesorter.min.js" nella cartella del nostro progetto siamo pronti a partire.
Nella pagina HTML le prime istruzioni da dare sono quelle di inclusione: eccole di seguito:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>A questo punto dobbiamo realizzare una tabella sulla quale avviare lo script: giusto per rendere l'idea è utilizziamo una semplice tabella con tre colonne (nome, cognome e indirizzo email).
<table id="tabella" class="tablesorter">
<thead>
<tr><th>Cognome</th><th>Nome</th><th>Indirizzo Email</th></tr>
</thead>
<tbody>
<tr><td>Malatesta</td><td>Francesco</td><td>francescomalatesta@live.it</td></tr>
<tr><td>Malatesta</td><td>Lorenzo</td><td>lorenzomalatesta@live.it</td></tr>
<tr><td>Celenza</td><td>Luca</td><td>lucacelenza@live.it</td> </tr>
</tbody>
</table>Non rimane che richiamare il nostro script. Una volta sicuri di aver incluso dei file corretti, si può effettuare la chiamata al metodo tablesorter():
$(document).ready(function() {
$("#tabella").tablesorter();
});Ora che abbiamo visto il funzionamento basilare, analizziamo nel dettaglio i parametri che possiamo passare al metodo principale, tablesorter().
Le opzioni del plugin
Analizziamo le opzioni che il plugin ci mette a disposizione e che possiamo utilizzare in fase di inizializzazione, nella chiamata al metodo tablesorter().
| Opzione | Descrizione |
|---|---|
| cancelSelection | una variabile booleana, il cui valore è "true" di default. Serve a specificare se deve essere permessa la selezione del testo nella testata della tabella, in modo tale da rendere le voci della testata più simili ad un pulsante |
| cssAsc | di tipo String, indica il selettore CSS da utilizzare per definire lo stile della testata quando si effettua il sorting in modo ascendente |
| cssDesc | funziona nello stesso modo di cssAsc, ma definisce lo stile della testata quando si effettua il sorting in modo discendente |
| cssHeader | funziona come le due opzioni precedenti, ma in questo caso definisce lo stile della testata della tabella quando non ancora vengono effettuate operazioni di sorting di nessun genere |
| debug | può assumere i valori "true" oppure "false" e, quando impostata su "true" genera delle informazioni di debug utili allo sviluppatore |
| headers | un oggetto che se definito permette di definire se implementare per una singola colonna il sorting, oppure no (più avanti i dettagli) |
| sortForce | di tipo Array, consente di definire ed aggiungere un secondo criterio personalizzato di sorting in modo tale da gestire al meglio l'output risultante e farlo sembrare meno "a caso". (Esempio: dopo aver ordinato una lista per cognome, si può aggiungere come secondo criterio il nome) |
| sortList | sempre di tipo Array, è simile a sortForce, con la differenza che consente di definire, oltre al criterio personalizzato, anche la direzione (ascendente o discendente) |
| sortMultiSortKey | una stringa che definisce il tasto sulla tastiera scelto per eseguire il sorting su più criteri (di default il tasto usato per quest'operazione è Shift) |
| textExtraction | di tipo stringa (si può anche usare una funzione) permette di definire quale metodo deve essere usato per estrarre i dati dalla tabella, in modo tale da potersi regolare successivamente per la tecnica di sorting da usare quando richiesta |
| widthFixed | permette di decidere (è una booleana che può assumere i valori di "true" o "false") se applicare una larghezza fissa alle tabelle |
Facciamo subito un esempio per spiegare meglio il funzionamento dell'opzione headers. Questa opzione permette di decidere se abilitare il sorting per una singola colonna, oppure disabilitarlo. Il tutto si esegue con una sintassi decisamente semplice, riportata qui di seguito:
$(document).ready(function() {
$("#tabella").tablesorter({
// si definisce l'oggetto passato
headers: {
// disabilitiamo il sorting della seconda colonna;
1: { sorter: false },
// disabilitiamo il sorting della terza colonna
2: { sorter: false }
}
});
});La spiegazione è immediata: si lavora sul parametro sorter cambiando il suo valore da true (che è anche la selezione di default) a false.
Ora che abbiamo analizzato completamente i vari parametri possiamo passare all'ultimo passo nella scoperta di questo plugin: osserviamo da vicino le modalità di aggiunta di funzionalità extra, tramite l'uso dei metodi addParser e addWidget.
Estendere il Plugin con nuove Funzionalità
Le funzionalità del plugin che abbiamo esaminato non lasciano sicuramente indifferenti, tuttavia possiamo dare a questo strumento una marcia in più. Precisamente, con due metodi: addParser e addWidget.
addParser
addParser consente di definire un nuovo parser per le informazioni. In altre parole permette di riconoscere tipi di dati particolari o poco comuni, garantendo quindi un'operazione di ordinamento più precisa.
Riportiamo l'esempio del sito ufficiale per maggiore chiarezza:
$.tablesorter.addParser({
// set a unique id
id: 'grades',
is: function(s) { return false; },
format: function(s) {
return s.toLowerCase().replace(/good/,2).replace(/medium/,1).replace(/bad/,0);
},
// set type, either numeric or text
type: 'numeric'
});
$(function() {
$("#tabella").tablesorter({
headers: {
2: { sorter:'grades' }
}
});
});Prima di richiamare come sempre il metodo tablesorter() viene fatta la chiamata al metodo addParser con alcune opzioni in ingresso:
| Opzione | Descrizione |
|---|---|
| id | è un nome univoco per definire il parser attuale e poterlo richiamare in seguito |
| is | viene impostato su false per evitare l'auto-detect del parser, in modo tale da implementarlo solo se necessario; |
| format | è la funzione che definisce la stringa con il dato da normalizzare, rendendo quindi fattibile il sorting secondo altri criteri personalizzati; |
| type | il tipo di dato da ordinare, può assumere due valori di tipo stringa ("numeric" o "text") |
A questo punto tablesorter prende come opzione sotto la voce leader il tipo di parser in corrispondenza della colonna desiderata. Come riportato nel listato, il sorter di tipo gradi viene associato alla colonna numero 3 (è riportato il 2 visto che si parte dallo zero).
addWidget
Analizziamo ora la creazione di nuovi Widget tramite il metodo addWidget. La funzionalità implementata stavolta è un piccolo add-on che ripete le testate ogni dieci righe circa: decisamente utile nel caso di tabelle molto lunghe che quindi possono far confondere l'utente. Di seguito il codice.
$.tablesorter.addWidget({
id: "repeatHeaders",
format: function(table) {
if(!this.headers) {
var h = this.headers = [];
$("thead th",table).each(function() {
h.push(
"" + $(this).text() + ""
);
});
}
$("tr.repated-header",table).remove();
for(var i=0; i < table.tBodies[0].rows.length; i++) {
if((i%5) == 4) {
$("tbody tr:eq(" + i + ")",table).before(
$("").html(this.headers.join(""))
);
}
}
}
});
$("table").tablesorter({
widgets: ['zebra','repeatHeaders']
});Anche in questo caso le cose non sono molto complesse da comprendere. Il metodo addWidget prende in input due opzioni. La prima, "id", rappresenta l'identificatore univoco da utilizzare successivamente, mentre "format", che trova la sua applicazione pratica in una funzione, si occupa di definire le operazioni da fare.
Nello specifico, il metodo inizialmente copia le informazioni contenute nella testata. Quindi, tramite un loop, provvede a re-inserire queste informazioni ogni dieci record, in modo tale da non far perdere la continuità. Dopo aver definito il metodo e il Widget si può ricamare il metodo "tablesorter" vero e proprio, caricando anche il nuovo segmento di codice creato tramite l'opzione "widgets".
Abbiamo visto tutte le features di questo completo e pratico plugin. In realtà in giro su internet si trovano anche delle alternative: tuttavia questa è sembrata una delle migliori, imbattibile in molte sue features, oltre che per la sua estensibilità.
