Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

“Una raccolta di suggerimenti e trucchi per sviluppatori, volutamente brevi e immediati”

Una tabella con il plug-in jQuery DataTables

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.

 

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×