MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Tabelle dinamiche con jQuery e il templating
In questi "tempi moderni" del Web è sempre più importante che le nostre pagine siano facili da aggiornare e che la loro interattività rispecchi il più possibile quella dei normali software tradizionali, ecco perché oggi tramite jQuery e un paio di plugin vedremo come creare delle tabelle Html dinamiche, simulando un classico caso di un listini prodotti.
Cosa vuol dire dinamiche? Significa che se in questo listino prodotti devo aggiungere o togliere un elemento dovrei evitare il più possibile di manipolare il codice Html stesso, ma modificare un file "sorgente" di dati nel quale ci sono esclusivamente le informazioni da visualizzare (nome, prezzo e disponibilità) che al caricamento della pagina verrano importate e inserite nella tabella, infine faremo in modo che questa tabella possa essere ordinabile in base al campo interessato come accade comunemente in programma come Excel o Google Documents.
[btn icona="eye-open" url="http://www.moebiusmania.net/tutorial/2012/tabelle_jquery/demo.html"]Guarda la demo[/btn] [btn icona="download-alt" url="http://www.moebiusmania.net/wp-content/plugins/download-monitor/download.php?id=14"]Scarica i file[/btn]
Prerequisiti:
Conoscenza base di jQuery e degli Array [avviso]In generale quando si lavora con Ajax in locale ci possono essere un paio di problemini su Chrome... se vi sembra che le chiamate Ajax non vengano fatte effettivamente è quello che succede! Spostate i file in server locale tipo Xamp e simili e le cose riprenderanno a funzionare oppure aprite Firefox ;) [/avviso]Cosa ci serve:
Useremo il framework Bootstrap 2 per il CSS (ha degli ottimi stili per le tabele, specie in casi di prototipizzazioni sono molto comodi!) e due plugin di jQuery: Templating e TableSorter per rendere la nostra tabella dinamica e interattiva.1. Organizziamo i file
Avremo 3 file javascript, un Html, un Css e un JSON... nessuno ci obbliga a disporli in modo particolare, ma mettendo le mani avanti in una possibile inclusione di questo componente in un sito completo ho preferito tenere un'organizzazione precisa e separata:- il file .html nella cartella principale
- i file .js nella sottocartella /script
- il .css di Bootstrap in /css
- il file .json nella sottocartella /dati
2. I dati all'interno del file JSON
Ogni prodotto sarà rappresentato da un oggetto Javascript con 3 proprietà: nome - prezzo - disponibilità. I prodotti tanti o pochi che siano saranno comunque una serie, quindi tenendo una struttura abbastanza classica per un file JSON, avremo un array che all'interno di ogni nodo avrà uno degli oggetti descritti poco fa:[
{"nome":"Manuale CSS","qta":12,"prezzo":39},
{"nome":"Tastiera Wireless","qta":8,"prezzo":80},
{"nome":"Stampante","qta":3,"prezzo":200},
{"nome":"Penne","qta":20,"prezzo":1},
{"nome":"Vacanza!","qta":0,"prezzo":"N/A"}
]
Quindi aggiungere o rimuovere un prodotto corrisponde ad aggiungere o togliere un nodo (e relativo oggetto) da questo array.
3. La pagina Html e perché Bootstrap è figo
In un nuova pagina Html (per questo esempio userò il Doctype Html5) includiamo nel tag head la libreria Bootstrap di Twitter. Poi spostandoci nel body creiamo una tabella Html con solamente intestazione e corpo vuoto che chiamo "prodotti" e alla quale associo subito tre classi "table", "table-bordered" e "table-striped" che sono definite all'interno di Bootstrap che renderanno la nostra tabella con le righe a colorazione alternata (appunto, a zebra) e con un bordo esterno discreto e pulito Utilizzare il tag <thead> per definire l'intestazione di una tabella dovrebbe essere una prassi, tuttavia è una cosa che vedo spesso ignorata in molte pagine web... in questo caso ci servirà per forza non solo per fare le cose per bene ma perché l'intestazione verrà usata anche dal plugin TableSorter.4. Il template Html che useremo
Non abbiamo creato alcuna riga e/o cella nel corpo della tabella proprio perché lo scopo di una tabella dinamica è che questi elementi vengano create e inseriti in automatico tramite Javascript in base al numero di prodotti presenti nel file JSON. Per fare ciò sfrutteremo una tecnica chiamata "templating" per il quale un blocco di codice Html viene popolato con i dati e inserito nella pagine tante volte quanto è necessario, ma anziché sviluppare tutto a mano ci appoggeremo al plugin Tmpl di jQuery, che ha una sua struttura che dobbiamo seguire per definire il template:<script id="templateRiga" type="text/javascript">
<tr>
<td>${nome}</td>
<td>${qta}</td>
<td>${prezzo}</td>
</tr>
</script>
I "segnaposti" che iniziano con ${ verrano poi sostituiti dai valori delle variabili (nel nostro caso definite nel file JSON) non a caso si chiamano con gli stessi nomi.
Quindi questo blocco di Html non apparirà fin dall'inizio nella pagina ma rimarrà astratto, lo richiameremo tra poco con Javascript.
[avviso]Il templating nasce con PHP... tuttavia da qualche anno merito dello sviluppo delle librerie Javascript e del diffondersi delle web-app viene utilizzato molto anche lato client. Il vantaggio che i caricamenti delle pagine sono più veloci e le interazioni più reattive. Lo svantaggio è che tutto ciò che viene importato con Ajax NON viene indicizzato. [/avviso]
5. Caricare i dati e inserirli nella pagina
Ok, potremmo dire che è più il setup del tutto che il codice effettivo, infatti grazie a jQuery e i suoi plugin caricare un file tramite una chiamata asincrona (Ajax), passare i dati al template e inserire il tutto nella pagina è un'operazione semplice, inseriamo 3 tag script in fondo alla pagina: uno caricherà jQuery, il secondo il plugin di Templating e il terzo conterrà queste poche righe:// Caricamento completato documento
$(document).ready(caricamento);
function caricamento(){
// Chiamata Ajax per caricare il file JSON con i prodotti
$.getJSON("dati/prodotti.json",creaTabella);
}
// Funzione che viene eseguita al termine del caricamento
// la variabile "informazioni" ospiterà il contenuto del file JSON
function creaTabella(informazioni){
// Inserisco il template con i dati esterni nella tabella
$("#templateRiga").tmpl(informazioni)
.appendTo("#prodotti");
}
La riga dentro la funzione "creaTabella" si occupa di selezionare il template Html, chiamare il plugin Tmpl passandogli i dati che abbiamo caricato dal file JSON e con il metodo .appendTo() inserire il risultato dell'operazione nel corpo della tabella.
A questo punto salvate il file e lanciatelo nel browser, dovreste vedere la tabella non più vuota ma con i dati definiti nel file esterno.
6. Rendere ordinabile la tabella
Per far percepire il tutto più come un'applicazione e meno come una pagina possiamo fare in modo che cliccando sulle intestazioni delle colonne queste vengano riordinate, grazie al plugin TableSorter (che dovrà essere caricato prima dello script con le nostre azioni) ci basterà aggiungere una riga nella funzione "creaTabella":function creaTabella(informazioni){
...
// Rendo la tabella ordinabile
$("#prodotti").tablesorter();
}
Ora salvate e riaggiornate nel browser!
7. Idee per il dopo
Considerato che la riga che si occupa di fare la chiamata Ajax è all'interno di una funzione Javascript si possono provare delle alternative rispetto alla soluzione che vi ho presentato qui, anziche caricare il tutto all'avvio della pagina è possibile:- creare un pulsante e far caricare i dati esterni al click su di esso
- impostare un timer e far aggiornare i contenuti della tabella ogni x millisecondi