datatablesAan de slag met datatabellen


Opmerkingen

Belangrijkste kenmerken

  • Variabele lengte paginering
  • Direct filteren
  • Sorteren op meerdere kolommen met detectie van gegevenstypes
  • Slim omgaan met kolombreedtes
  • Toon gegevens van bijna elke gegevensbron
  • DOM, JavaScript-array, Ajax-bestand en server-side verwerking
  • Scrollopties voor tabel viewport
  • Volledig internationaliseerbaar
  • Ondersteuning jQuery UI ThemeRoller
  • Grote verscheidenheid aan plug-ins
  • Het is gratis

Middelen

versies

Versie Release-opmerkingen Publicatiedatum
1.9 en eerder (oud) https://datatables.net/forums/discussion/8332/datatables-1-9-0-released 2014/02/01
1.10 en later https://datatables.net/new/1.10 2015/08/12

DataTables API

DataTables wordt geleverd met een uitgebreide API die wordt gebruikt om informatie over de DataTables op een pagina te manipuleren of te verkrijgen.

De API is op 3 manieren toegankelijk:

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');
 

Nadat het object is ingesteld, kunt u alle API-functies van dat object aanroepen.

var columns = table.columns();
 

Een ingewikkelder voorbeeld is het toevoegen van enkele rijen aan uw tabel:

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

De volledige lijst met API-functies vindt u hier .

Functie inschakelen / uitschakelen (opties voor gegevenstabellen)

DataTables heeft de mogelijkheid om een aantal functies in of uit te schakelen, zoals paging of zoeken. Om deze opties te kiezen, selecteert u ze eenvoudig in uw initialisatie:

$(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
    } );
} );
 

Merk op dat de aanhalingstekens rond de optienamen optioneel zijn:

paging: false,
ordering: false,
info: false
 

Is ook volkomen geldig.

Een volledige lijst met opties vindt u hier , samen met beschrijvingen van het gebruik van elke optie.

Deze opties kunnen slechts eenmaal worden ingesteld, wanneer de tabel wordt geïnitialiseerd. U kunt deze beperking echter omzeilen door toe te voegen:

 destroy: true
 

Minimale gegevenstabellen initialiseren:

Onderstaande code tabel draaien en een binnendiameter van tableid in een gegevenstabel en een DataTables API instantie terug:

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

Vergelijk dit met de onderstaande code, waardoor de tabel een DataTable wordt maar geen API-instantie DataTables wordt geretourneerd:

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

Zie het gedeelte over de DataTables API-documentatie voor meer informatie over wat u kunt doen met het DataTables API-exemplaar.

Installatie

Hebben vereiste JavaScript en CSS bestanden opgenomen in uw index.html . U kunt dit doen door de CDN-bestanden te gebruiken die op de volgende paden beschikbaar zijn:

<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>
 

Of door individuele lokale bestanden te downloaden en zelf te hosten. Om een uitgebreid pakket van vereiste JavaScript en CSS bestanden te krijgen, bezoekt u de downloadbuilder van DataTables, waarmee u de functies kunt kiezen die u nodig hebt en deze in één pakket kunt samenvoegen (of afzonderlijke bestanden kunt aanbieden). Neem deze op in de volgorde die onderaan de pagina wordt weergegeven.

DataTables is afhankelijk van jQuery , dus jquery.dataTables.js het op voor jquery.dataTables.js :

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

Datatabellen zijn ook beschikbaar via NPM

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

en prieel

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