Plugin jQuery per la gestione delle tabelle


TableManager è un plugin jQuery pensato per sviluppatori web e web designer che hanno bisogno di lavorare con le tabelle html. Questo plugin è stato progettato e creato per facilitare la gestione delle tabelle, spesso usate, ad esempio, nei back-end dei siti oppure nel mostrare a video i risultati di qualche query. Grazie ad esso infatti sarà molto semplice rendere le tabelle ordinabili per colonna, ma anche filtrarle tramite un input text e dividerle in pagine.

Download Table manager

Versioni rilasciate

Last release: v. 1.1.0

Prima versione rilasciata

DOWNLOAD 1.0.1

Source code 1.0.1

E’ la seconda versione rilasciata.

Novità:

  • Nuova classe aggiunta alla tabella: tablePagination, tableFilterBy;
  • Nuova classe per l’elemento <th>: disableFilterBy;
  • Nuova opzione per disabilitare il filtro su una o più colonne: disableFilterBy: [];
  • Nuovo data-attribute per mostrare le righe in una singola tabella: data-showrows=”[int,int,int]”.

DOWNLOAD 1.1.0

Source code 1.1.0

Opzioni

Si può decidere quale sarà l’ordinamento della prima visualizzazione, per esempio voglio che appena stampata a video la tabella risulti ordinata per la colonna 2 e a seguire per la colonna 3. Sarà anche possibile scegliere se le colonne devono essere ordinate in modo ascendente (“0” o “asc”) o discendente (“1” o “desc”).

colonna = numero intero
ordinamento = 0 o ‘asc’, 1 o ‘desc’

Di seguito l’esempio di ordinamento iniziale per la colonna 2 in modo ascendente e la colonna 3 in modo discendente.

da vers. 1.0

Se si vuole disabilitare una o più colonne sarà possibile farlo con l’opzione “disable”. Si può anche decidere di disabilitare l’ultima colonna, pur senza conoscere l’esatto numero di colonne nella tabella, in questi casi basterà scrivere “-1” o “last”.

colonna = numero intero o ‘last’

Nell’esempio che segue disabilitiamo la prima e l’ultima colonna:

da vers. 1.0

Per correggere gli errori di ordinamento di una colonna che contiene una data si può dichiarare il formato di data della colonna attraverso l’opzione “dateFormat”. Attraverso quest’opzione è possibile dichiarare il numero di colonna da formattare e il formato da noi utilizzato al momento della stampa a video. E’ facile infatti che le date che noi riportiamo in tabella siano formattate in modo simile a gg-mm-aaaa, queste verrebbero normalmente ordinate quindi per giorno, mese, anno, il che vorrebbe dire che in ordine ascendente la data 20-03-1978 verrebbe dopo la data 12-03-2011, pur essendo ovviamente la seconda la data più recente. L’opzione dateFormat ordina la colonna nel modo corretto (per anno, mese, giorno).

colonna = numero intero
’formato-data’ = dd-mm-yyyy, mm-dd-yyyy, dd/mm/yyyy, mm/dd/yyyy

Per esempio, io voglio dichiarare che la terza colonna è una data in formato gg-mm-aaaa e la quarta è sempre una data, ma in formato gg/mm/aaaa:

da vers. 1.0

E’ possibile aggiungere un filtro sopra la tabella che permette di mostrare solo le righe che contengono la stringa immessa nel campo apposito. L’utente potrà selezionare dalla tendina la colonna da usare come filtro e il campo input per scrivere ciò che desidera trovare all’interno della tabella. Per utilizzare questo filtro basterà aggiungere l’opzione appendFilterby (che può avere solo valori true o false) e dargli valore true.

true o false

da vers. 1.0

Attraverso questa opzione sarà possibile aggiungere i controlli per dividere la tabella in pagine e per navigare tra esse. Creerà dei pulsanti per mostrare ultima e prima pagina, precedente e successiva e la pagina numero n.
Solitamente questa opzione è accompagnata all’opzione “showrows”.

true o false

da vers. 1.0

L’opzione showrows permette di aggiungere sopra alla tabella un menu a tendina con diverse opzioni di numeri di righe da mostrare. In tal modo l’utente potrà scegliere se mostrare 10, 20, 100… righe della tabella. L’opzione si aspetta un array di valori, che saranno poi i numeri di righe che la tabella mostrerà dopo la scelta dal menu a tendina.

Solitamente questa opzione è accompagnata all’opzione “pagination”.

valore = numeri interi

Nell’esempio il menu a tendina permetterà di mostrare i seguenti numeri di righe: 5, 10, 20, 50, 100.

da vers. 1.0

Quest’opzione permette di tradurre (o cambiare) le stringhe che il sistema mostra di default in inglese. Le opzioni che mostrano testo traducibile sono:

  • appendFilterby (voc_filter_by, voc_type_here_filter)
  • showrows (voc_show_rows)

stringa =

  • voc_filter_by (Prima della tendina di scelta della colonna per cui filtrare),
  • voc_type_here_filter (Placeholder dell’input del filtro),
  • voc_show_rows (Prima della tendina di scelta di numeri di righe da mostrare)

traduzione = stringa di testo

Nell’esempio traduco tutte le stringhe traducibili delle opzioni sopra riportate.

da vers. 1.0

L’opzione debug è molto utile per capire cosa non va o cosa abbiamo sbagliato durante la scrittura delle opzioni e la loro messa a punto. Lo strumento di debug non mostrerà niente a video, ma mostrerà gli errori nella console del browser (tramite un classico console.log). E’ una variabile booleana (true o false).

true o false

da vers. 1.0

E’ possibile disabilitare il filtro su una o più colonne tramite opzioni.

colonna = numero intero o ‘last’

Nell’esempio seguente disabilito il filtro sulla prima e l’ultima colonna.

da vers. 1.1

Classi e data-attributes

Da aggiungere alla colonna da disabilitare singolarmente.

 

da vers. 1.0

Da aggiungere alla tabella a cui assegnare la paginazione.

da vers. 1.1

Da aggiungere alla tabella a cui assegnare il filtro.

da vers. 1.1

Da aggiungere alla colonna su cui disabilitare il filtro.

da vers. 1.1

Da aggiungere alla colonna da disabilitare singolarmente.

da vers. 1.0

Da aggiungere alla colonna contenente date.
dateFormat: non è modificabile.
formato della data: indica il formato della data che si è utilizzato nella colonna. I formati ammessi sono:
ddmmyyyy, mmddyyyy, dd-mm-yyyy, mm-dd-yyyy, dd/mm/yyyy, mm/dd/yyyy

da vers. 1.0

Da aggiungere alla tabella per indicare le righe da mostrare nella tendina.

da vers. 1.1

Download Table manager

Utilizzo del plugin

Utilizzo di base

Con una semplice riga di codice sarà possibile rendere le colonne della propria tabella ordinabili secondo il criterio “numerico-alfabetico”, ordinando quindi prima i numeri poi le lettere.

In questo modo dunque abbiamo inizializzato il plugin per ottenere la sua funzione di base di ordinamento.

Utilizzo completo

E’ importante ricordare che ogni opzione deve essere separata da una virgola, ciò vale soprattutto se si vogliono utilizzare più opzioni contemporaneamente.
Qui sotto potete trovare l’esempio di utilizzo con tutte le opzioni possibili:

Spieghiamolo un attimo.

  • Inizialmente la tabella verrà ordinata con il seguente ordine di colonne: 3 ascendente, 2 ascendente, 1 discendente;
  • l’ultima colonna è disabilitata;
  • attivo il filtro per colonna;
  • la quarta colonna contiene date con il formato gg-mm-aaaa;
  • modalità di debug inattiva;
  • le stringhe sono tradotte con il testo tra virgolette;
  • abilito la paginazione;
  • abilito il mostra righe con le seguenti opzioni: 5, 10, 50, 100;
  • disabilito il filtro sulla prima colonna e sull’ultima.

Personalizzazione: stile e CSS

La personalizzazione dello stile è stato reso semplice grazie all’aggiunta di id e classi specifiche per gli elementi toccati dal plugin.

Classi disponibili

Classe di base della testata della tabella che permette l’ordinamento. Questa classe quindi è presente solo se la colonna è stata resa ordinabile.
Colonna non ordinabile.
Indica che la colonna è ordinata in ordine ascendente.
Indica che la colonna è ordinata in ordine discendente.
Classe del filtro che contiene select e input per filtrare la tabella.
Classe dello strumento che mostra un certo numero di righe.
Racchiude i controlli delle pagine della tabella.
Comprende tutti i pulsanti utili per la paginazione.
Indica la pagina corrente.
Indica il pulsante che porta alla prima pagina.
Indica il pulsante che porta alla pagina precedente.
Indica il pulsante che porta alla pagina numerata.
Indica il pulsante che porta alla pagina successiva.
Indica il pulsante che porta all’ultima pagina.

Id disponibili

Filtro che contiene select e input per filtrare la tabella.
Strumento che mostra un certo numero di righe.
Racchiude i controlli delle pagine della tabella.

Esempio classico di utilizzo delle classi per la personalizzazione.

Se voglio aggiungere delle icone (Font Awesome per esempio) ai miei elementi, intanto scarico Font Awesome e lo installo all’interno del mio progetto, quindi includo i suoi file. Quando è pronto per l’utilizzo posso scrivere per esempio questo:

Download Table manager