Il JavaScript di questa settimana consente di ordinare le colonne delle tabelle di dati in modo ascendente o discendente. Supporta l'ordinamento di vari formati di dati ed è facilmente configurabile.
La sua utilità è evidente. Un'aspetto, spesso sottovalutato, dei JavaScript è la loro capacità di aumentare l'usabilità dei siti. In particolare - nel contesto di siti che utilizzano linguaggi come ASP, PHP, ecc. - alcune funzionalità possono essere svolte dai JavaScript, piuttosto che dai linguaggi lato server, evitando così l'invio dei dati al server e il conseguente refresh della pagina. Il grosso vantaggio per gli utenti è l'azzeramento dei tempi di attesa per queste operazioni, che hanno, così, una risposta immediata. Ne deriva anche uno sgravio dei carichi del server per il gestore del sito. Il JavaScript che viene presentato, appunto, consente di ordinare i dati delle tabelle senza far ricorso a query SQL di ordinamento.
- esempio.htm
- sortabletable.js
- blank.png
- downsimple.png
- upsimple.png
## 1: LA SEZIONE JAVASCRIPT
Questa parte si compone di un JavaScript esterno denominato "sortabletable.js" e di un JavaScript interno. Il JavaScript interno crea un array con i formati dei dati.
Nell'esempio fornito i dati delle quattro colonne sono di diverso tipo:
- stringa di testo con distinzione tra maiuscole e minuscole;
- stringa senza testo con distinzione tra maiuscole e minuscole;
- numeri;
- date in formato ISO, ovvero anno-mese-giorno (aaaa-mm-gg).
Il relativo array, che si trova alla riga 112 del file esempio.htm, contiene i quattro formati di dati, utilizzando la seguente sintassi:
["String", "CaseInsensitiveString", "Number", "Date"]
Lo script, come detto all'inizio, è molto semplice ma efficace. L'unica funzione presente, attivata dal link presente nella pagina web, controllerà lo stato di visualizzazione dell'elemento associato (style.display) e lo cambierà: se lo stato è visibile lo renderà invisibile, se lo stato è invisibile lo renderà visibile.
Il nome dell'elemento da rendere visibile o invisibile è passato allo script dall'unica variabile che accetta (id) e lo si dovrà specificare al'interno della pagina web, come vedremo più avanti.
È possibile aggiungere tutte le risorse che si desidera anche se va precisato che il browser caricherà in memoria tutti gli elementi anche prima di visualizzarli. Lo script si limita solo a renderli visibili o invisibili. Ciò significa che se volessimo utilizzare lo script per una presentazione di fotografie in un'uica pagina web, va precisato che l'utente dovrà attendere, prima di rendere operativa la pagina e i link, il caricamento di tutte le immagini, visibili e non visibili, incluse nella galleria.
Di conseguenza, se si vogliono aggiungere o eliminare colonne nella tabella, bisognerà aggiungere o eliminare i formati contenuti nell'array, che dovranno essere tanti quante sono le colonne.
Inoltre, nell'esempio, ogni colonna gestisce un formato di dati diverso, per cui nell'array ad ogni colonna corrisponde un diverso formato di dati. Se, ad esempio, adattiamo il nostro script ad una tabella con otto colonne che gestiscono tutte un formato di dati numerico, allora l'array dovrà essere modificato in questo modo:
["Number", "Number", "Number", "Number", "Number", "Number", "Number", "Number"]
Infine è possibile avere delle colonne non ordinate inserendo nell'array come tipo di dati "None".
Facendo click su una cella d'intestazione (th) i dati verranno ordinati secondo il formato di dati contenuto in quella colonna. Se non si vogliono utilizzare celle d'intestazione, ma soltanto normali celle, oltre a modificare (nel file html) le celle della prima riga da th a td, è anche necessario cambiare la riga 208 del file sortabletable.js da
while (el.tagName != "TH")
a
while (el.tagName != "td")
Bisogna comunque lasciare le intestazioni all'interno del tag thead e i dati all'interno del tag tbody.
Al primo click su una cella d'intestazione, viene invocato l'ordinamento ascendente della colonna sottostante, al secondo click i dati verranno ordinati in modo discendente. Se si vuole cambiare l'ordinamento predefinito - al primo click discendente, invece che ascendente - bisogna modificare la riga 102 del file sortabletable.js
SortableTable.prototype.defaultdescending = false;
impostando il parametro da "false" a "true".
Le immagini utilizzate nell'esempio si trovano nella cartella "images". Se si vuole rinominare la cartella o eliminarla, bisogna modificare di conseguenza la riga 149 del file sortabletable.js contenente il percorso per le immagini:
img.src = "images/blank.png";
## 2: LA SEZIONE HTML/CSS
Nella pagina web di esempio, la tabella va identificata dalla classe "sort-table" e dall'"id table-1".
La pagina contiene anche un CSS, che, oltre a formattare la tabella, richiama come sfondi delle celle d'intestazione una freccetta rivolta verso l'alto e una rivolta verso il basso. Queste freccette verranno richiamate e visualizzate tramite il JavaScript e sono contenute nella cartella images.
Infine nel CSS è impostata la seguente regola:
th{
cursor: pointer;
cursor: hand;
}
che serve per mostrare il cursore a forma di mano sulle celle d'intestazione (la seconda dichiarazione - cursor: hand; - serve ad Internet Explorer).
Se si vuole che il cursore assuma la forma di una freccetta allora bisognerà modificare la regola in questo modo:
th{
cursor: default;
}
Se nessuna regola viene impostata Mozilla, FireFox, Netscape e Internet Explorer mostreranno il cursore con con la forma che assume quando passa su del testo, Opera invece mostrerà una freccetta.
