Ossia una funzione javascript non intrusiva che ordina e riordina le righe di una tabella in base al loro contenuto.
(L’inglese spesso è molto più sintetico)
Questo tutorial è la traduzione e la riscrittura di quello su frequency decoder
Lo script in questione è la seconda versione di uno che aveva funzioni simili ma che dava qualche problemino di velocità di elaborazione.
Miglioramenti
- lo script crea e riutilizza un oggetto javascript
- questo script è almeno 5 volte più rapido del suo predecessore (a occhio)
- è reso semplice scrivere funzioni personalizzate di riordino delle righe
- possibilità di evidenziare le righe o le colonne in maniera alternata
- accessibilità via tastiera
- lo script determina il tipo di dati di una colonna anche se questo non è definito
- se i dati di colonna sono identici non c’è nessun riordino
- l’inizializzazione delle routine di riordino avviene tramite chiamata javascript
- si possono definire funzioni che avvengono prima e dopo il riordino
Il problema della prima versione dello script era una lentezza dovuta al fatto che la funzione cercava di leggere il contenuto di ogni singolo nodo del TD.
Adesso viene creata una sorta di matrice bidimensionale con i valori della tabella solo la prima volta che questa viene caricata. Tutte le operazioni successive avvengono su questa matrice.
Inizializziamo il javascript effettuando questa chiamata
fdTableSort.jsWrapper(yourTableId, colNum);
ossia indichiamo l’id della tabella da riordinare e il numero della colonna di riferimento (la numerazione parte da 0)
esempio:
fdTableSort.jsWrapper("salesTax", 2);
la tabella salesTax verrà ordinata in base ai contenuti della colonna numero 2
Quali sono i tipi di dati riordinabili?
Date (formati dd-mm-yyyy, mm-dd-yyyy o yyyy-mm-dd), valute (£, $, €, ¥ and ¤), numeri e decimali e, infine, testo semplice (riordinato non tenendo conto delle maiuscole). In più, il carattere usato come separatore per le date può essere ”/”, ”-”, ”.” o ” ” (spazio).
Le modalità per evidenziare righe e colonne sono sostanzialmente due: alternato per le righe e le colonne, evidenziazione per le colonne da riordinare.
In entrambi i casi per indicare che si vuole il metodo di evidenziazione alternato basta dare lo stile rowstyle-alternate o colstyle-alternate.
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.
Nel caso in cui ci possa essere un dubbio sul tipo di dati da riordinare si può rendere il className più ‘esplicito’ scrivendo: sortable-numeric, sortable-currency, sortable-text o sortable-date.
Si possono scrivere anche funzioni di riordino personalizzate. Il modo per invocarle sarà sempre del tipo sortable-nomefunzionepersonalizzata.
I nomi delle funzioni devono contenere solo lettere o underscore.
Per un maggior approfondimento sulle funzioni personalizzate si rimanda alla pagina dell’autore.
Le funzioni di riordino possono essere invocate all’apertura della pagina semplicemente scrivendo sortable-onload-N dove N è il numero della colonna di riferimento.
Tabelle molto grandi possono impiegare molto tempo per il riordino quindi è possibile mostrare a video un indicatore del processo in corso. Infatti nel tempo di elaborazione sia a BODY che a TH vengono assegnate i className sort-active da qui la possibilità di creare DIV temporanei.
Per velocizzare il riordino i consigli dell’autore dello script sono:
- definire il tipo di dati per le tabelle molto grandi indicando l’appropriato className (sortable-numeric, sortable-currency, sortable-text o sortable-date)
- evitare l’evidenziazione per le colonne di tabelle molto grandi
qui c’è una demo e qui il codice sorgente
Il mio stack è PHP/MySQL/Git/Docker. Lavoro con Agile (Scrum) e utilizzo principalmente AWS come cloud provider.
Sono papà e marito. Nel tempo libero mi piace leggere, il buon vino e viaggiare.
- Installare Nginx Proxy Manager su Portainer e aggiungere proxy host - 11 Marzo, 2024
- GIT: differenza tra CHECKOUT e SWITCH - 4 Marzo, 2024
- Gli Eventi Scrum: Guida Completa e Best Practices - 20 Settembre, 2023
