jQuery DataTables è uno dei plugin jQuery più apprezzati in circolazione.
Le motivazioni del suo successo sono tante, e tra queste ci stanno sicuramente la sua flessibilità e possibilità di configurazione.
Oggi vediamo come sommare il valore di una colonna, mettendo il risultato nel footer.
Vedremo due esempi:
In questo articolo ho parlato di come integrare Twitter Boostrap e jQuery DataTables.
Se però proviamo ad usare il nuovo Twitter Bootstrap (versione 3) notiamo che il plugin funziona, ma la grafica va un pò a farsi friggere.
Questo perchè sono cambiati vari componenti e regole CSS.
Qui potete trovare le differenze.
Partendo da quell'articolo, vediamo come modificare il nostro script per renderlo più compatibile con TB 3.
Ho già parlato sia di Twitter Bootstrap che di jQuery DataTables.
Il primo è un framework CSS / JS ideato e usato dai creatori di Twitter; il secondo un plugin per jQuery per intabellare i dati con opzioni e modalità.
In realtà TB ha già il supporto per le tabelle, solo che non ha tutte quello opzioni come filtri, ordinamento, ecc.; che troviamo invece in DT.
E quindi, noi che non ci accontentiamo mai, perchè non integriamo le due cose??
Ed è quello che faremo.
Prima di tutto richiamiamo ciò che ci serve:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="css/bootstrap_dt.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="script/bootstrap_dt.js"></script>
Come vedete, jQuery, TB e DT li prendo da CDN e non da locale.
Poi abbiamo bootstrap_dt.css e bootstrap_dt.js che ci servono per integrare i due componenti.