In questo semplice tutorial vedremo passo per passo come installare il plugin nel nostro progetto e come farlo funzionare, quindi vedremo come personalizzarlo affinché renda al meglio.

Requisiti minimi

  • jQuery versione da 1.8 in poi (non testato con jQuery 2 e 3)
  • tableManager.js

Installazione

Per prima cosa andrà installata (se non si è già fatto) la libreria jQuery nel nostro progetto. Per farlo basterà aggiungere la seguente stringa prima della fine del </body>:

Questa riga vi permetterà di utilizzare jQuery senza avere il file nello stesso spazio del vostro progetto. In alternativa dovrete andare a scaricare l’ultima versione dal sito ufficiale: https://jquery.com/ . Una volta scaricato inserite il file .js o il .min.js in una cartella a vostra scelta all’interno del vostro progetto o del vostro sito (ad esempio in una cartella chiamata “js”) quindi aggiungete la seguente stringa prima della fine del </body>:

Solitamente i file javascript si includono alla fine dei documenti per rendere più veloce il caricamento della pagina.
Per approfondire l’installazione potrete dare un’occhiata alla documentazione ufficiale jQuery.

Se non lo avete ancora fatto scaricate il plugin: Download Table Manager.

Prendete il file tableManager.js e inseritelo in una cartella del vostro sito o progetto (ad esempio una cartella chiamata “js”). A questo punto inserite la seguente stringa sotto quella di inclusione di jQuery. Attenzione! E’ fondamentale che essa sia dichiarata sotto quella di jQuery altrimenti il browser restituirà degli errori.

Per capire meglio come includere un file .js date un’occhiata alla guida di Html.it: http://www.html.it/pag/16048/i-percorsi-assoluti-e-relativi/

Utilizzo di base

Una volta terminata l’installazione del plugin si può passare al suo utilizzo e alla sua inizializzazione.
Nella nostra pagina, in cui compare la tabella, dovremo scrivere il seguente codice javascript, sotto l’inclusione del file tableManager.js, e prima della fine del tag </body>:

E’ fondamentale che questo codice javascript sia scritto sotto il file tableManager.js.
Analizziamo la stringa:

$(‘#mia-tabella’).tablemanager(); –> dichiaro che l’elemento con id = “mia-tabella” utilizzerà la funzione principale tablemanager(). In tal modo inizializzo il plugin.

Questo codice va bene naturalmente per inizializzare il nostro plugin all’interno di un documento html o php. Se invece preferisco avere un file js separato non dovrò far altro che creare un file javascript, ad esempio script.js, e inserirlo nel mio progetto, per esempio nella classica cartella denominata “js”. A quel punto dovrò includere nel mio documento html o php il mio file esterno javascript:

E invece nel mio file script.js personalizzato andrò ad inserire semplicemente la seguente stringa:

Questa spiegazione vale se si vuole fare un utilizzo di base del plugin, senza scegliere opzioni e senza personalizzazioni. Per le opzioni e le personalizzazioni disponibili seguire il tutorial Utilizzo completo.

Utilizzo completo

Per utilizzare al meglio questo plugin per la gestione delle tabelle html sono state messe a disposizione dello sviluppatore alcune opzioni per correggere possibili errori, organizzare, personalizzare la propria tabella. Per la lista delle opzioni disponibili leggere la documentazione completa.

Una volta inizializzato il plugin attraverso il tutorial Utilizzo di base si potrà decidere di voler ordinare di default una tabella al momento del caricamento della pagina. Qui entra in gioco l’opzione “firstSort”. Per aggiungere opzioni alla funzione di base “tablemanager” bisogna inserirle all’interno delle sue parentesi tonde e comprese tra due ulteriori parentesi graffe (vedi esempio). Quindi scrivere:

Le parentesi graffe { e } servono per delimitare il gruppo di opzioni che si vogliono dare alla tabella.

firstSort: [[3,0],[2,’desc’]] –> in questo modo diciamo al plugin: appena la tabella viene caricata ordina per colonna numero 3 in modo ascendente, se ci sono valori uguali ordina per colonna 2 in modo discendente.

Per aggiungere altre opzioni queste devono essere separate da virgole.
Aggiungiamo un’opzione che disabiliti la prima e l’ultima colonna:

A questo punto ci accorgiamo che la colonna 4 è una data (separata magari da “/”), quindi formattiamola per far sì che l’ordinamento prenda in considerazione la data nell’ordine corretto.

Ora che tutti gli ordinamenti funzionano passiamo al resto. Aggiungiamo un’opzione per filtrare e una per mostrare un certo numero di righe e dividere la tabella in pagine.

appendFilterby –> dandogli valore true attiviamo la funzione “Filtra per colonna”.

pagination –> con valore true attiviamo la paginazione.

showrows –> diamo un gruppo di valori che saranno le righe da mostrare.

A questo punto decidiamo che magari vogliamo tradurre in italiano le stringhe di testo presenti. Questo si può fare tramite l’opzione vocabulary.

In tal modo abbiamo tradotto le stringhe del filtro e del “Mostra righe”.
Se qualcosa non funziona un’opzione molto comoda, soprattutto per i più esperti, può essere quella di debug.

Attivando la funzione di debug il plugin potrà aiutarti a trovare errori o incompatibilità tramite la console del tuo browser.

Conclusioni

In questo modo abbiamo terminato il tutorial per l’utilizzo completo delle opzioni del plugin.

Per ulteriori opzioni, per le classi e i data-attributes visitate la pagina ufficiale del plugin: Table Manager

Download Table Manager