Le tabelle intelligenti: Data tables jquery

Capita spesso di dover presentare dei dati, dei risultati, ecc… , utilizzando una tabella.

Il quesito è sempre il solito: come faccio a rendere leggibile e presentabile una tabella?

Se partiamo dal presupposto di avere già a disposizione un framework grafico ( Bootstrap? Foundation? ect… ) con buoni CSS per rendere in grafica la tabella, possiamo migliorare ancora la presentabilità e l’utilizzo della stessa con “Datatables” JQuery.

DataTables Table plug-in for jQuery è un plug-in utilizzabile con i vari sistemi di styling e che permette, a seconda delle configurazioni, di ordinare ma anche nascondere/mostrare le colonne,  fare ricerche “in page” nella tabella, fare  esportazione dati in vari formati ( PDF, CSV, Excel,… ) nonché rendere responsive la stessa tabella.

datatable-jquery

 

L’installazione poi è molto semplice, basta configurare la pagina di download del sito http://datatables.net/ con le caratteristiche desiderate e scaricare i file css e js ( oppure copiare i link ai file online forniti ) , utilizzare i corretti stili css da applicare alla tabella e gestire le varie funzionalità con dei semplici javascritp.

datatable-min

Un esempio HTML di tabella:

<table id="example" class="display" cellspacing="0" width="100%" data-order='[[ 1, "asc" ]]' data-page-length='20'>

dove con data-order si indica la colonna che comanda l’ordinamento ed il tipo di ordinamento e data-page si indica il numero di risultati prima di paginare.

 

datatable-min-2Un esempio di configurazione javascript è il seguente:

 


<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
  $('#example').dataTable( {
  "dom": 'T<"clear">lfrtip',
  "responsive": true,
  "tableTools": {
  "sSwfPath": "../datatables/TableTools/swf/copy_csv_xls_pdf.swf",
  "aButtons": [
  {
  "sExtends": "copy",
  "sButtonText": "Copia"
  },
 {
  "sExtends": "pdf",
  "sButtonText": "PDF"
  },
  {
  "sExtends": "print",
  "sButtonText": "Stampa"
  }
  ]
  },
  language: {
  processing: "Caricamento in corso...",
  search: "Cerca&nbsp;:",
  lengthMenu: "Mostra _MENU_ elementi",
  info: "Dal numero _START_ al numero _END_ di _TOTAL_ elementi",
  infoEmpty: "Trovati 0di 0 su 0 elementi",
  infoFiltered: "(filtrato su _MAX_ elementi in totale)",
  infoPostFix: "",
  loadingRecords: "Caricamento in corso...",
  zeroRecords: "Nessun dato trovato",
  emptyTable: "Nessun dato disponibile",
  paginate: {
  first: "Prima",
  previous: "Precedente",
  next: "Prossima",
  last: "Ultima"
  },
 }
  } );
 } );
 </script>

 

Per maggiori dettagli:  http://datatables.net/manual/index

0 comments on “Le tabelle intelligenti: Data tables jqueryAdd yours →

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *