datatablesIniziare con i datatables


Osservazioni

Caratteristiche chiave

  • Impaginazione a lunghezza variabile
  • Filtraggio al volo
  • Ordinamento a più colonne con rilevamento del tipo di dati
  • Gestione intelligente delle larghezze delle colonne
  • Visualizza i dati da quasi tutte le origini dati
  • DOM, array JavaScript, file Ajax e elaborazione lato server
  • Opzioni di scorrimento per viewport tabella
  • Completamente internazionalizzabile
  • Supporto per ThemeRoller dell'interfaccia utente jQuery
  • Ampia varietà di plug-in
  • È gratis

risorse

Versioni

Versione Note di rilascio Data di rilascio
1.9 e precedenti (eredità) https://datatables.net/forums/discussion/8332/datatables-1-9-0-released 2014/02/01
1.10 e successive https://datatables.net/new/1.10 2015/08/12

API DataTables

DataTables viene fornito con un'estesa API che viene utilizzata per manipolare o ottenere informazioni sui DataTable su una pagina.

È possibile accedere all'API in 3 modi:

var table = $('#tableid').DataTable(); //DataTable() returns an API instance immediately
var table = $('#tableid').dataTable().api(); //dataTable() returns a jQuery object
var table = new $.fn.dataTable.Api('#tableid');
 

Una volta che l'oggetto è stato impostato, puoi chiamare qualsiasi funzione API su quell'oggetto.

var columns = table.columns();
 

Un esempio più complesso è l' aggiunta di alcune righe alla tua tabella:

table.rows.add( [ {
        "name":       "John Doe",
        "employee_id":   "15135",
        "department":     "development",
    }, {
        "name":       "Jane Smith",
        "employee_id":   "57432",
        "department":     "quality assurance",
    } ] )
    .draw();
 

L'elenco completo delle funzioni API può essere trovato qui .

Funzione Abilita / Disabilita (Opzioni DataTables)

DataTables ha la capacità di abilitare o disabilitare un numero delle sue funzioni, come il paging o la ricerca. Per scegliere queste opzioni, selezionale semplicemente nella tua inizializzazione:

$(document).ready(function() {
    $('#tableid').DataTable( {
        "paging":   false, //Turn off paging, all records on one page
        "ordering": false, //Turn off ordering of records
        "info":     false  //Turn off table information
    } );
} );
 

Si noti che le virgolette attorno ai nomi delle opzioni sono facoltative:

paging: false,
ordering: false,
info: false
 

È anche perfettamente valido.

Un elenco completo di opzioni può essere trovato qui , insieme con le descrizioni degli usi di ciascuna opzione.

Queste opzioni possono essere impostate una sola volta, quando la tabella viene inizializzata. Tuttavia, puoi aggirare questa limitazione aggiungendo:

 destroy: true
 

Inizializzazione di un DataTable minimo:

Il codice seguente trasformerà la tabella con un id di tableid in un DataTable e restituirà un'istanza API DataTables:

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

Confrontalo con il codice seguente, che trasformerà la tabella in DataTable ma non restituirà un'istanza API DataTables:

$(document).ready(function() {
    $('#tableid').dataTable();
});
 

Consultare la sezione Documentazione API DataTables per ulteriori dettagli su cosa può essere fatto con l'istanza API DataTables.

Installazione

Hai richiesto i file JavaScript e CSS inclusi nel tuo index.html . Puoi farlo utilizzando i file CDN disponibili nei seguenti percorsi:

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

Oppure scaricando singoli file locali e ospitandoli da soli. Per ottenere un pacchetto completo di file JavaScript e CSS , visita il builder di download DataTables che ti consentirà di scegliere le funzionalità necessarie e di condensarle in un unico pacchetto (o offrire singoli file). Includere questi nell'ordine visualizzato nella parte inferiore della pagina.

DataTables dipende da jQuery , quindi jquery.dataTables.js prima di jquery.dataTables.js :

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 

DataTables sono disponibili anche tramite NPM

npm install datatables.net    # Core library
npm install datatables.net-dt # Styling
 

e Bower

bower install --save datatables.net
bower install --save datatables.net-dt