---

Come creare delle tabelle professionali: il plug-in DataTables

---

Dopo la lettura di questo post, sarai in grado di creare e gestire in modo semplice delle tabelle professionali all'interno delle tue pagine web.

---

---

Attenzione!

Per utilizzare il plug-in che descriverò in seguito occorre prima importare la libreria jQuery, accessibile da questo link: https://code.jquery.com/jquery/

Nel mio esempio, volendo importare la versione minified di jQuery Core 3.2.1, all'interno della pagina avremo:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

---

1. Utilizziamo il plug-in DataTables

Per creare e gestire delle tabelle all'interno di una pagina web, uno dei plug-in che consiglio a tutti di usare è DataTables. In questo contesto è sicuramente uno dei più utilizzati.

---

2. Implementazione della libreria

Il primo passo da fare è quello di importare il plug-in all'interno del progetto. L'import consiste nel caricare un file Js contenente tutte le sue funzioni e un file Css per caricare tutti gli stili utilizzati.

Uno dei metodi è quello di importare questi due file direttamente dal web:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

Nel caso in cui il plug-in lo si volesse prima scaricare e successivamente caricare in una delle cartelle interne al progetto:

<link rel="stylesheet" type="text/css" href="/plugin/DataTables/datatables.css">
 
<script type="text/javascript" charset="utf8" src="/plugin/DataTables/datatables.js"></script>

Dove /plugin/DataTables/ è la directory dove è stato caricato il plug-in.

---

3. Creazione di una tabella

All'interno della nostra pagina creiamo la tabella utilizzando del semplice codice Html:

<table id="table_test">
    <thead>
        <tr>
            <th>Colonna 1</th>
            <th>Colonna 2</th>
            <th>Colonna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Testo 1</td>
            <td>Testo 2</td>
            <td>Testo 3</td>
        </tr>
        <tr>
            <td>Testo 4</td>
            <td>Testo 5</td>
            <td>Testo 6</td>
        </tr>
    </tbody>
</table>

In quest'esempio è stata creata una tabella con tre colonne e due righe.
Da notare che come attributo del tag table sia stato inserito l'Id table_test, come per l'intestazione della tabella siano stati utilizzati i tag <thead></thead> e per il corpo i tag <tbody></tbody>

---

4. Associare la tabella a DataTables

Per far girare la tabella appena creata attraverso le funzionalità e gli stili del plugin DataTables occorre effettuare una semplice inizializzazione:

$(document).ready(function() {
    $('#table_test').DataTable();
});

In questo caso l'inizializzazione è stata effettuata alla nostra tabella con Id table_test. L'effetto è il seguente:

Se avessimo due tabelle, #table_test e #table_test_2, si potrebbero inizializzare insieme nel seguente modo:

$(document).ready(function() {
    $('#table_test, #table_test_2').DataTable();
});

Come si può notare dalla foto più in alto, questa è l'inizializzazione più semplice e consente di creare una tabella con DataTables utilizzando tutte le impostazioni di default.

Dopo aver creato la tabella, è possibile agire sulle opzioni per migliorarne le funzionalità e lo stile. Alcune di queste, saranno oggetto della mia prossima mini guida!

---