“Una raccolta di suggerimenti e trucchi per sviluppatori, volutamente brevi e immediati”
Una tabella con il plug-in jQuery DataTables
- Giugno 05, 2019
- by
- Donatantonio
DataTables è un plug-in per la libreria Javascript di jQuery.
È uno strumento altamente flessibile, che permette di aggiunge funzionalità avanzate a qualsiasi tabella HTML.
Grazie a DataTables è un attimo implementare una ricerca in tabella, un ordinamento, una selezione di righe, un’esportazione Excel e tanto altro.
Prima volta con DataTables?
Innanzitutto includiamo nell’head della nostra pagina le librerie necessarie:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
Stiamo includendo nel nostro codice tutto il necessario: jQuery, DataTables, Bootstrap. (N.B. Bootstrap non è indispensabile…).
Creiamo la nostra tabella HTML, oppure se già abbiamo una tabella assicuriamoci di assegnare ad essa un ID oppure una CLASS in modo tale da poterla distinguere e assegnare a DataTables:
<table id='idTabella' class="table table-bordered table-striped table-condensed"> <thead> <tr> <th>Nome</th> <th>Cognome</th> <th>Età</th> <th>Comune</th> </tr> </thead> <tbody> <tr> <td>Mario</td> <td>Rossi</td> <td>28</td> <td>Roma</td> </tr> <tr> <td>Anna</td> <td>Bianchi</td> <td>32</td> <td>Napoli</td> </tr> <tr> <td>Marco</td> <td>Verdi</td> <td>27</td> <td>Milano</td> </tr> <tr> <td>Sandra</td> <td>Viola</td> <td>30</td> <td>Torino</td> </tr> <tr> <td>Fabio</td> <td>Neri</td> <td>34</td> <td>Palermo</td> </tr> </tbody> </table>
Dopo aver definito la tabella dobbiamo solo richiamare il plugin DataTables sulla nostra tabella che nel caso specifico avrà id=’idTabella’. Possiamo tranquillamente copiare e incollare la porzione di codice sottostante prima della chiusura del <body>.
E’ importante notare che il plug-in va richiamato utilizzando $(selettore).DataTable({parametri..}) rispettando la nomenclatura che vuole la “D” maiuscola e la “T” maiuscola (quindi è corretto DataTable, non Datatable o datatable…)
<script type="text/javascript">
$('#idTabella').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
}
});
</script>
Ecco la nostra prima tabella con jQuery DataTables:
DataTables è un plug-in ricco di funzioni sempre in aggiornamento, in questo nostro Tips & Tricks abbiamo -volutamente- utilizzato una dichiarazione base per muovere i primi passi con questo potente strumento. Il sito web ufficiale di DataTables è https://datatables.net/.
Scarica il codice completo cliccando qui.
Scopri altri Tips & Tricks.
Ti potrebbe piacere anche
PHP: invertire una stringa (strrev)
PHP: lunghezza di una stringa (strlen)
