Tabelle ordinabili con jQuery e Tablesorter

Sono lontani, o almeno dovrebbero esserlo, i tempi in cui si usavano le tabelle per impostare il layout della pagina. Ormai la tabella viene utilizzata esclusimante per presentare in maniera leggibile una serie di dati. L’avvento dei framework javascript ha permesso inoltre di aggiungere alle tabelle un pizzico di movimento, e di rendere il contenuto maggiormente leggibile da parte dell’utente. Mi riferisco ovviamente alle tabelle riordinabili e ridimensionabili.
In questo tutorial vedremo come creare tabelle ordinabili, utilizzando il framework javascript Jquery ed il plugin per Jquery Tablesorter.

Demo e docs

Vi anticipo la live demo che ho realizzato per questo articolo: eccola qui, bella e funzionante. Quanto alla documentazione, per realizzare l’articolo mi sono semplicemente - e abbastanza ovviamente - attenuto alle istruzioni sul sito del plugin: le trovate qui.

Includere Jquery e Tablesorter

Per cominciare dobbiamo scaricare Jquery e Tablesorter.
Una volta posizionati i due file all’interno delle directory che preferiamo, dbbiamo includerli - all’interno del tag HEAD - nella pagina html che conterrà la tabella ordinabile, in questo modo:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>

Ordinare la tabella con Tablesorter

A questo punto bisognerà comunicare al plugin su quale tabella agire, specificando l’ID che assegneremo alla tabella da rendere ordinabile. Supponendo che l’ID sia #mytable:

<script type="text/javascript">
	$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
	</script>

Caratteristiche della tabella ordinabile

La tabella che javascript renderà ordinabile, deve essere una tabella html standard, per cui è necessario definire anche i tag THEAD e TBODY. Dobbiamo anche specificare la classe che utilizzeremo nei css per dare un tocco di stile alla nostra tabella, in questo caso ho usato la classe tablesorter.

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
	<th>Nome</th> 
	<th>Cognome</th> 
	<th>Email</th> 
	<th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
	<td>Daniele</td> 
	<td>Rollo</td> 
	<td>mymail[at]mail.com</td> 
	<td>http://www.danielerollo.com</td> 
</tr> 
<tr> 
	<td>Homer</td> 
	<td>Simpson</td> 
	<td>Themail[at]simposn.net</td> 
	<td>Simpson website</td> 
</tr> 
<tr> 
	<td>Oliver</td> 
	<td>Hatton</td> 
	<td>oliver[at]newteammail.net</td> 
	<td>newteam.comm</td> 
</tr> 
<tr> 
	<td>Mike</td> 
	<td>Jimma</td> 
	<td>jimma@mike.net</td> 
	<td>jimma.flcc</td> 
</tr> 
</tbody> 
</table>

Applicare uno stile alla tabella

Se avete seguito correttamente tutti i passi, già a questo punto la tabella comincia ad essere sensibile rispetto ai click dell’utente (provate a cliccare sulle voci contenute nel THEAD). Per completare il lavoro però, è necessario applicare uno stile alla tabella, in modo che reagisca al click del mouse, e si modifichi in base a quale colonna è stata riordinata, ed in che ordine, se discendente o ascendente. Abbiamo già specificato la classe tablesorter nell’html, dobbiamo creare delle regole relative a questa classe nel foglio di stile.

table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

Ricordate di creare le immagini asc.gif, desc.gif e bg.gif, o qualsiasi altra immagine specificata come background nel css.

Solo un’implementazione base di Tablesorter

È tutto! Con poche righe di codice, sfruttando la potenza di jQuery, avete reso decisamente più gradevole e leggibile le vostra pagina. Se non avete commesso errori infatti, la tabella dovrebbe già essere letteralmente bella e pronta per i vostri utenti.
Ma ovviamente questa è un’implementazione di base: se desiderate approfondire maggiormente l’utilizzo di Tablesorter, vi rimando al sito del plugin, dove troverete, oltre a tutti gli esempi,anche la documentazione necessaria per realizzare operazioni più complesse, come per esempio inizializzare tablesorter su una tabella vuota e riempirla con dati recuperati via ajax.
Per concludere, vi ricordo nuovamente l’esempio funzionante, che ho realizzato con il codice visto nel tutorial. Enjoy.