Tabella ordinabile per testo e numeri
Intestazioni cliccabili che riordinano le righe della tabella in modo crescente o decrescente.
Quando si usa
Quando presenti classifiche, cataloghi, dati economici o elenchi amministrativi che l'utente deve confrontare.
Perché si usa
L'ordinamento nel browser evita il ricaricamento della pagina per tabelle di dimensioni contenute e rende più semplice l'esplorazione dei dati.
Vantaggi principali
- Soluzione riutilizzabile e adattabile
- Codice privo di dipendenze esterne
- Struttura commentabile e integrabile nel progetto
Anteprima del risultato
La tabella ordinabile consente di cliccare sulle intestazioni per cambiare l'ordine dei dati.
| Nome | Punti |
|---|---|
| Anna | 92 |
| Luca | 75 |
| Marta | 88 |
Cliccando su una colonna, l'elenco viene riordinato.
Codice completo
Studia il flusso prima di copiarlo e provalo in un ambiente separato. Adatta sempre nomi, selettori, percorsi e controlli al progetto reale.
<table id="tabellaDati">
<thead><tr><th><button data-col="0">Corso</button></th><th><button data-col="1" data-tipo="numero">Ore</button></th></tr></thead>
<tbody><tr><td>HTML</td><td>20</td></tr><tr><td>JavaScript</td><td>35</td></tr></tbody>
</table>
<script>
const tabella=document.getElementById('tabellaDati');
let direzione=1;
tabella.querySelectorAll('th button').forEach(bottone=>{
bottone.addEventListener('click',()=>{
const col=Number(bottone.dataset.col);
const numerico=bottone.dataset.tipo==='numero';
const righe=[...tabella.tBodies[0].rows];
righe.sort((a,b)=>{
let x=a.cells[col].textContent.trim(), y=b.cells[col].textContent.trim();
if(numerico){x=Number(x);y=Number(y);return (x-y)*direzione;}
return x.localeCompare(y,'it',{sensitivity:'base'})*direzione;
});
direzione*=-1;
righe.forEach(r=>tabella.tBodies[0].appendChild(r));
});
});
</script>Da personalizzare: Colonne, tipo dei dati, indicatori visivi e gestione di date o valute.
Errore da evitare: Per migliaia di record usa ordinamento e paginazione sul server; il browser non deve caricare l'intero archivio.