Personal tools
jQuery.DataTables.js: tabelle per tutti i gusti

Quando mostrare un dato non basta!

Jan 22, 2013

jQuery.DataTables.js: tabelle per tutti i gusti

Se una semplice tabella non rende merito ai dati mostrati, ci si rivolge a Javascript/css per avere di più. Vediamo come usare DataTables per avere molto di più!

Tante volte abbiamo il compito di mettere in mostra tramite tabelle una serie di dati e le (più che giustificate) richieste sono sempre le stesse: fare batching dei dati visualizzati; permettere l'ordinamento delle singole colonne; poter fare ricerca sulle righe della tabella filtrandone il testo.

Cercando sul web, vi renderete conto che i plugin Javascript disponibili sono molti, ma uno mi ha colpito in particolare: jQuery.DataTables.js. Semplice da usare, funzionalità di base estese, molti plugin aggiuntivi e, non da ultimo per un plonista, esiste una versione già "pacchettizzata" per Plone su pypi.

Vediamo quali sono le sue caratteristiche principali.

Introduzione del plugin nelle pagine HTML

Per utilizzare questo plugin, tutto quello che bisogna fare è inserire nella pagina jquery.dataTables.css e jquery.dataTables.js.

Come detto esiste anche la versione pacchettizzata di questa libreria: è un porting realizzato registrando le risorse javascript e css per poterle inserire nel portal_javascript e nel portal_css e utilizzarle all'interno di Plone; chi volesse più informazioni le può cercare su pypi: collective.js.datatables.

Utilizzo base del plugin

Una volta introdotte le risorse Javascript e css nella pagina, per cominciare a utilizzare DataTables è sufficiente avere una tabella e inizializzarla tramite il costruttore del plugin:


jq('#table_id').dataTable()
 

Facendo questo, si passa da una tabella come questa:

Tabella base

a una tabella come questa:

Tabella css js

Come si può vedere, con una riga di Javascript nella tabella abbiamo già aggiunto:

  • batching e navigazione delle pagine della tabella;
  • ordinamento delle colonne;
  • filtro sul testo della tabella.

Altre funzionalità

Questo plugin, come si può vedere dalla documentazione sul sito, presenta molte altre funzionalità; ma ce ne sono alcune molto utili su cui spenderò qualche parola.

Traduzioni

Il plugin è traducibile in ogni sua label. Per farlo, si può procedere tramite un vocabolario di traduzioni durante l'inizializzazione del plugin in questo modo:


jq(document).ready(function(){
jq('#table_id').dataTable({
"oLanguage":{
"sLengthMenu": "Visualizza _MENU_ elementi per pagina",
"sZeroRecords": "Nessun elemento trovato",
"sInfo": "Visualizzati da _START_ a _END_ di _TOTAL_ elementi",
"sInfoEmpty": "Visualizzati da 0 a 0 di 0 elementi", 
....
}
});
});
 

Un approccio alternativo può essere quello di usare l'attributo oLanguage passando il path di un oggetto "callable" del server che ritorni le informazioni relative alle traduzioni. Questo è molto comodo quando si lavora con il pacchetto per Plone, perché nelle ultime versioni è stata introdotta una vista che, una volta chiamata dal plugin, tornerà il vocabolario con le traduzioni:

  
jq(document).ready(function(){
jq('#table_id').dataTable({
"oLanguage":{
"sUrl": "@@collective.js.datatables.translation",
}
});
});
 

In questo modo il plugin verrà visualizzato nella stessa lingua del browser, se la traduzione lato Plone esiste.

Ordinamento: quando l'alfabeto non basta!

L'ordinamento di base di DataTables è quello alfabetico e tiene in considerazione caratteri e numeri, ma non è inusuale che venga chiesto di ordinare le colonne della tabella anche in base ad altri criteri. Vediamo cosa si può fare, ad esempio, se viene chiesto di ordinare una colonna in base alla stringa scritta al suo interno, sapendo che quella stringa è una data nel formato gg/mm/aaaa.

Il plugin è scritto in jQuery, per cui sfruttiamo lo stile usato da jQuery per estendere i plugin. Guardando codice ed esempi, si può vedere che DataTables usa 3 funzioni per fare l'ordinamento di una colonna: una funzione prepara i dati per il confronto fra loro e le altre due fanno i confronti per l'ordinamento crescente e decrescente.

Potremo quindi scrivere codice come questo:

  
jq(document).ready(function(){
jq.extend(jq.fn.dataTableExt.oSort,
{
"date-ita-pre": function(a){
// ci aspettiamo date nel formato DD/MM/YYYY
// se le trasformiamo nel formato inglese sono ordinabili
var itaDate = a.split('/');
if (itaDate == "")
return 0;
return (itaDate[2] + itaDate[1] + itaDate[0]) * 1;
},
           "date-ita-asc": function(a,b){
return ((a<b)? -1 : ((a>b) ? 1: 0));
},
           "date-ita-desc": function(a,b){
return ((a<b)? -1 : ((a>b) ? 1: 0));
}
...
});

jq('#table_id').dataTable({
"aoColumn": [null, ... , ..., {"sType": "date-ita"}]
});
});

Analizziamo il codice qui sopra partendo... dalla fine! Nelle ultime righe, inizializziamo il plugin impostando l'ordinamento delle colonne tramite una lista: ogni elemento della lista corrisponde a una colonna. Se si usa null, si utilizza l'ordinamento standard. Per l'ultima colonna della tabella, stiamo dicendo di utilizzare l'ordinamento "date-ita". Tramite questa stringa, il plugin sa che esistono 3 funzioni Javascript, precedentemente dichiarate, che permetteranno di preparare il dato e confrontarlo per ordinarlo rispetto agli altri dati.

Subito sopra, infatti, possiamo vedere che, mentre le ultime due funzioni si occupano di fare il confronto fra due valori per ordinarli fra loro, la prima prende in ingresso una stringa, la spezza in corrispondenza della '/' e la ricompone secondo l'ordine inglese (anno, mese, giorno), che è l'ideale per ordinare una data. La moltiplicazione per 1 viene fatta per fare casting della stringa a intero e poter fare così dei confronti fra interi. Allora sarà facile per le altre funzioni decidere se 20130102 è maggiore o minore di 20130103 e così via.

Navigazione alternativa nella paginazione

Questa in realtà è una finezza ma, personalmente, più che una navigazione che permette di muoversi solo tra le pagine "precedente" e "successiva", preferisco una paginazione più completa che mi permetta di saltare anche alcune pagine.

  
jq(document).ready(function(){
jq('#table_id').dataTable({
"sPaginationType": "full_numbers",
...
});
});
 

Questo ci permette di avere una navigazione come quella mostrata nella figura che segue:

Tabellanavigatore

Conclusioni

La lunghezza del post non rende onore alla semplicità d'uso del plugin: una volta aggiunto a una pagina, bastano 5 minuti di orologio per poter avere tabelle con tutte le funzionalità necessarie a mostrare e elaborare grosse moli di dati. Ho provato il plugin anche utilizzando tabelle con circa un migliaio di elementi, e i tempi di risposta sono rapidissimi.

Inoltre, guardando la documentazione, ci si può rendere conto che ci sono ancora molte funzionalità da poter sfruttare. Per me, ad oggi, è sicuramente il primo plugin da tenere in considerazione quando si devono mostrare dati tabellari.

comments powered by Disqus