Corsi on-line

Ordinare dinamicamente i dati di una tabella con Tablesorter

Ho recentemente scoperto un interessante plugin di jQuery che consente di effettuare operazioni di ordinamento dei dati contenuti all’interno di una comune tabella HTML. Il plugin in questione si chiama Tablesorter e offre disparate funzionalita per l’ordinamento dinamico dei dati contenuti in una tabella senza, ovviamente, la necessità di alcun refresh di pagina.

L’utilizzo di Tablesorter è semplicissimo: come sempre è necessario includere nell’header della pagina la libreria jQuery ed il file .js del plugin. Fatto questo si predisponga, all’interno del body della pagina, una tabella HTML munita di ID univoco e sintatticamente corretta:

<table id="anagrafica">
<thead>
<tr>
  <th>Nome</th>
  <th>Cognome</th>
  <th>Età</th>
</tr>
</thead>
<tbody> 
<tr>
  <td>Mario</td>
  <td>Rossi</td>
  <td>35</td>
</tr>
<tr>
  <td>Gianni</td>
  <td>Verdi</td>
  <td>29</td>
</tr>
<tr>
  <td>Luca</td>
  <td>Neri</td>
  <td>41</td>
</tr>
</tbody>
</table>

Dopo la tabella dovremo inserire il codcie di inizializzazione del plugin:

<script type="text/javascript">
$("anagrafica").tablesorter();
</script>

Volendo è anche possibile specificare delle opzioni come, ad esempio, l’ordinamento di default di alcuni campi della tabella. Ad esempio possiamo stabilire che l’ordinamento di default sia ascendente sul campo “cognome” e discendente sul campo “età”, in questo modo:

<script type="text/javascript">
$("anagrafica").tablesorter({
  sortList: [[1,0],[2,1]]
}); 
</script>

Si noti che i campi sono indicati mediante l’indice numerico il quale parte dallo zero: nella nostra tabella di esempio, quindi, il campo “nome” ha indice 0, “cognome” indice 1 e “età” indice 2. Per quanto riguarda l’ordinamento l’ascendente è indicato con 0 e discendente con 1.
Quindi:

  • [1,0] => il campo 1 è “cogmone” ed è ordinato in modo “ascendente” (0)
  • [2,1] => il campo 2 è “età” ed è ordinato in modo discendente (1)

Oltre a questa (sortList) sono presenti numerose altre opzioni interessanti. Per scaricare il plugin, accedere alla documentazione ufficiale e visualizzare gli esempi vi invito a visitare il sito ufficiale.

Post correlati
I più letti del mese
Tematiche