Ordinare i dati di una tabella con jQuery

Tutorial

Con questo articolo vedremo come creare tabelle ordinabili, utilizzando jQuery ed la libreria tablesorter.

Includere jquery e tablesorter

Per cominciare dobbiamo scaricare jquery e tablesorter.
Una volta salvati i file nella directory interessata dobbiamo includerli all'interno del tag HEAD nel seguente modo
<script src="http://www.decadeweb.it/js/jquery.js" type="text/javascript"></script>
<script src="http://www.decadeweb.it/js/jquery.tablesorter.js" type="text/javascript"></script>

Utilizzare la libreria tablesorter

A questo bisogna lavorare con la libreria inclusa ed specificare l'id assegnato alla tabella da rendere ordinabile.
<script type="text/javascript">
$(document).ready(function()
{
$("table").tablesorter();
}
);
</script>

Arrivati sino a questo punto abbiamo incluso il framework per lavorare con la tabella.
Passiamo ora alla creazione di una tabella html standard, per cui è necessario definire i tag THEAD e THBODY. Specificheremo anche la classe che utilizzeremo.

Creazione della tabella

<table id="table" class="tablesorter" width="600">
<thead>
<tr>
<th width="300">Nome</th> <th width="288">Età</th>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="#E1E1E1">Andrea</td>
<td bgcolor="#E1E1E1">21</td>
</tr>
<tr>
<td bgcolor="#E1E1E1">Gigi</td>
<td bgcolor="#E1E1E1">11</td>
</tr>
<tr>
<td bgcolor="#E1E1E1">Giuseppe</td>
<td bgcolor="#E1E1E1">27</td>
</tr>
</tbody>
</table>


Conclusione

È 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.
Di seguito potete scaricare un file sorgente e modificarlo a vostro piacimento.
Scarica file | Live demo

Autore

Sviluppatore web, aree riservete e gestionali.
Svolgo con passione e determinazione il proprio lavoro dedicando tempo alla ricerca e all'approfondimento di novità.

Sito web dell'autore