Come ordinare le righe di una tabella HTML

Forse nessuno se n’era accorto prima – o forse non me n’ero accorto solamente io! – ma già dal lontano 2006 c’è un bellissimo javascript che permette di ordinare le righe di una tabella secondo i criteri più disparati.

Essendo uno script javascript, come detto, si tratta di una funzione non invasiva, cioè avviene sul lato client, cioè voi programmatori dovete solamente implementare il codice nella pagina dove risiede la tabella da manipolare E NON creare qualche strana alchimia a monte.

Questo script è la versione rivisitata di uno script precedente che faceva la stessa cosa, che però era più lento nell’elaborazione dei dati.

  • si possono scrivere funzioni personalizzate per ordinare le righe
  • si possono evidenziare le righe/colonne con colori alternati
  • lo script determina automaticamente il tipo di dati presenti in una colonna (numeri, lettere, …)
  • si possono definire funzioni prima e dopo il riordino delle righe

Tanto per fare un esempio basilare, il tipo di chiamata che si farà per ordinare la tabella sarà di questo tipo:

fdTableSort.jsWrapper(yourTableId, colNum);

Per rendere qualsiasi colonna riordinabile basta assegnare al TH il className sortable. Lo script si occuperà sia di determinare il tipo di dati in colonna sia di creare una testa di colonna cliccabile con relativa freccia di ordine.

Per trasformare una colonna normale in una colonna “ordinabile” è sufficiente assegnare al tag TH classname=”sortable”.

I tipi di dati ordinabili riconosciuti sono:

  • testo semplice (case insensitive, cioè non tiene conto della differenza tra minuscole e maiuscole).
  • date (dd-mm-yyyy, mm-dd-yyyy, yyyy-mm-dd)
  • valute (€, $, £, ¥)
  • numeri e decimali

link: Unobtrusive Table Sort Script (revisited) , Una demo

Se però per caso usate jQuery o preferite una soluzione altamente semplice e facile da implementare, esiste anche un plugin per il suddetto framework.

Il plugin per jQuery si chiama TableSorter, ed usarlo – come ho detto – è molto facile…

1. inserire il richiamo per jQuery e TableSorter dentro <head>

<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

2. dare il corretto ID alla tabella da ordinare

 <table id="myTable">

3.  non scordarsi di richiamare la funzione

<script>
$(document).ready(function() {
    $(#myTable).tableSorter();
});
</script>
Altri sono arrivati qui cercando:
ordinare tabella html, ordinare una tabella html.

2 pensieri su “Come ordinare le righe di una tabella HTML”

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.