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>
Articoli simili
- Come evidenziare i commenti dell’autore
- Angoli arrotondati agli elementi HTML
- Creare puzzle da un’immagine, in javascript
- Menù ad albero in Javascript
- Velocizza i tempi di accesso al tuo framework preferito tramite le AJAX Libraries API di Google
Collegamenti sponsorizzati:
 |
Se l'articolo ti è piaciuto è sempre graditissimo un commento! Se vuoi ricevere le ultime novità dal mio blog puoi anche iscriverti ai Feed RSS (non si paga!). Anche via email. CIAO!! |  |
visto che hai gia partecipato...
DoZ scrive:
4 Agosto 2008 alle 17:58
Aggiungo anche SortTable di Stuart Langridge e Table Sort di Mike Hall, che servono anch’essi ad ordinare le righe di tabelle.
DoZ scrive:
14 Novembre 2008 alle 11:53
Anche il Javascript Table Sorter è un leggero script per trasformare una normale tabella in una griglia riordinabile.
Include parametri per la formattazione di righe, header class, riconoscimento automatico del tipo di dati e ordinamento delle colonne selettivo.
Dopo aver inserito il file JS nella pagine, una semplice funzione farà il lavoro:
var sorter=new table.sorter("sorter");sorter.init("sorter",1);
E’ possibile indicare anche la colonna che verrà “ordinata” all’inizio e quali colonne non avranno la caratteristica di poter essere ordinate.