Table accordion, un plugin per Bootstrap

La libreria Bootstrap fornisce una solida base per la creazione dell’interfaccia di siti e applicazioni web.
Tra le varie animazioni disponibili si trova l’effetto accordion, cioè l’apertura e chiusura “a fisarmonica” di più box di contenuto variabile.

Ho pensato di utilizzare lo stesso effetto per visualizzare all’interno di una tabella contenuti informativi aggiuntivi collegati ad una singola riga.
Quando si vuole mantentere leggera una tabella mostrando solo poche colonne, ma allo stesso tempo visualizzare a richiesta più informazioni, è possibile utilizzare il plugin che ho creato appositamente per questo scopo, che consente di caricare quando necessario, tramite AJAX, dati aggiuntivi riguardo una riga, passando come parametro un identificativo per consentire al backend di riconoscere il record.

Ho scritto un plugin compatibile con l’ultima versione di Bootstrap (4.x) e jQuery (dalla 1.10.x) e richiede pochissima configurazione.
Dispone anche di una cache per memorizzare temporaneamente i dati ed evitare più chiamate con gli stessi parametri.

Esempio

$('table').tableAccordion({
  url: 'data.json'
});

I dati devono essere ritornati in formato JSON, all’interno di una matrice, dove la prima riga è l’intestazione della tabella:

[
  [
    "Item code",
    "Description",
    "Quantity",
    "Price"
  ],
  [
    4256,
    "Arduino Uno",
    "1",
    "€ 20.00"
  ],
]

Ecco un altro esempio con tutti i paramtri disponibili

$('table').tableAccordion({
  url: 'data.json',
  id: '.td_id', // selettore CSS della della cella che contiene il valore da passare come parametro identificativo
  tbl_class: 'innerTable', // classe CSS che verrà attribuita alla tabella generata
  cache: false, // quando la cache è abilitata verrà effettuata una sola chiamata per riga
  success:  function(elem){ // callback che verrà eseguita dopo il caricamento dei dati e del rendering della tabella
    alert('Success!');
    console.log(elem);
  }
});

Demo

La demo è consultabile a questa pagina

Download

Il pacchetto completo è disponibile su GitHub

Requisiti


 


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.