6 Luglio, 2012 | Di

jQuery DataTables plugin

jQuery DataTables plugin

Spesso ci si trova nella necessità di dover creare, all'interno delle proprie pagine web, delle tabelle di dati interattive: filtrabili, ordinabili, paginate. Esistono diverse soluzioni lato client che implementano queste funzionalità ma la migliore, a mio avviso, è DataTables. Realizzato come plugin di jQuery, DataTables trasforma una comune tabella HTML aggiungendo tutte le caratteristiche richieste (e anche qualcosa in più). DataTables utilizza il principio detto del "progressive enhancement", ossia se per qualche ragione il javascript non viene caricato, la tabella viene comunque resa in HTML standard ed è quindi pienamente fruibile.

L'esempio più semplice che possiamo pensare e quello di avere una tabella HTML nel DOM della pagina:

<table id="table_id">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>etc</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      <td>etc</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
      <td>etc</td>
    </tr>
  </tbody>
</table>

Per applicare DataTables a questa tabella è sufficiente questa riga di Javascript (da eseguire dopo che il DOM è stato completamente caricato):

$('#table_id').dataTable();

In questo modo vengono applicate tutte le configurazioni di default (ordinameno, paginazione, ricerca, ...). Possiamo ovviamente passare alla libreria quali caratteristiche vogliamo che vengano abilitate o disabilitate:

$('#table_id').dataTable( {
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": true,
  "bSort": false,
} );

Così facendo abbiamo disabilitato la paginazione, la possibilità di cambiare il numero di righe mostrate e l'ordinamento sulle colonne, mentre resta abilitata la funzionalità di ricerca.

Molto interessante è la possibilità di caricare i dati da mostrare in tabella attraverso chiamate Ajax; in questo modo i dati non devono essere tutti presenti in pagina ma vengono richiamati man mano che l'utente scorre le pagine della tabella. In questo caso DataTables si inizializza così:

$('#table_id').dataTable( {
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "scripts/server_processing.php"
} );

Il parametro sAjaxSource identifica la url che viene richiamata via Ajax per ottenere il successivo dataset. DataTables appende alla url chiamata tutta una serie di parametri in automatico, come ad esempio il range di righe da restituire, se è stato impostato un filtro o un ordinamento su una qualche colonna. Il server deve restituire un oggetto JSON con le varie righe di dati più un insieme di metadati:

{
  "sEcho": 1,
  "iTotalRecords": "57",
  "iTotalDisplayRecords": "57",
  "aaData": [
    [
      "Gecko",
      "Firefox 1.0",
      "Win 98+ / OSX.2+",
      "1.7",
      "A"
    ],

Sarà compito del server ritornare i dati filtrati e ordinati in modo corretto, spostando quindi il carico di elaborazione dal client al server (utile quando si hanno dataset di migliaia di righe).

Questi sono solo due esempi delle decine di funzionalità messe a disposizione dal core di DataTables, estendibili a loro volta dei molti plugin di terze parti esistenti.