Looking for datatables Keywords? Try Ask4Keywords

datatablesErste Schritte mit Datentabellen


Bemerkungen

Hauptmerkmale

  • Variable Paginierung
  • Sofortige Filterung
  • Mehrspaltensortierung mit Datentyperkennung
  • Intelligente Handhabung von Säulenbreiten
  • Zeigen Sie Daten aus nahezu jeder Datenquelle an
  • DOM, JavaScript-Array, Ajax-Datei und serverseitige Verarbeitung
  • Bildlaufoptionen für das Tabellendarstellungsfenster
  • Vollständig internationalisierbar
  • Unterstützung für jQuery UI ThemeRoller
  • Große Auswahl an Plug-Ins
  • Es ist kostenlos

Ressourcen

Versionen

Ausführung Versionshinweise Veröffentlichungsdatum
1.9 und früher (Erbe) https://datatables.net/forums/discussion/8332/datatables-1-9-0-veröffentlicht 2014-02-01
1.10 und später https://datatables.net/new/1.10 2015-08-12

DataTables-API

DataTables enthält eine umfangreiche API, mit der Informationen zu den DataTables auf einer Seite bearbeitet oder abgerufen werden können.

Auf die API kann auf drei Arten zugegriffen werden:

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

Nachdem das Objekt festgelegt wurde, können Sie alle API-Funktionen für dieses Objekt aufrufen.

var columns = table.columns();
 

Ein komplexeres Beispiel ist das Hinzufügen einiger Zeilen zu Ihrer Tabelle:

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

Die vollständige Liste der API-Funktionen finden Sie hier .

Funktion aktivieren / deaktivieren (DataTables-Optionen)

DataTables kann eine Reihe von Funktionen aktivieren oder deaktivieren, z. B. Paging oder Suche. Um diese Optionen auszuwählen, wählen Sie sie einfach in Ihrer Initialisierung aus:

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

Beachten Sie, dass die Anführungszeichen um die Optionsnamen optional sind:

paging: false,
ordering: false,
info: false
 

Ist auch vollkommen gültig.

Eine vollständige Liste der Optionen gefunden werden kann hier , zusammen mit Beschreibungen der Verwendungen der einzelnen Optionen.

Diese Optionen können nur einmal festgelegt werden, wenn die Tabelle initialisiert wird. Sie können diese Einschränkung jedoch umgehen, indem Sie Folgendes hinzufügen:

 destroy: true
 

Initialisieren einer minimalen DataTables:

Der folgende Code tableid die Tabelle mit der ID der tableid in eine DataTable um und gibt eine DataTables-API-Instanz zurück:

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

Vergleichen Sie dies mit dem folgenden Code, der die Tabelle in eine DataTable umwandelt, jedoch keine DataTables-API-Instanz zurückgibt:

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

Weitere Informationen dazu, was mit der DataTables-API-Instanz möglich ist, finden Sie im Abschnitt zur Dokumentation der DataTables-API.

Installation

Haben Sie die erforderlichen JavaScript und CSS Dateien in Ihrer index.html . Sie können dies tun, indem Sie entweder die CDN-Dateien verwenden, die unter den folgenden Pfaden verfügbar sind:

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

Oder indem Sie einzelne lokale Dateien herunterladen und selbst hosten. Um ein umfangreiches Paket erforderlicher JavaScript und CSS Dateien zu erhalten, besuchen Sie den DataTables- Download-Builder. Hier können Sie die gewünschten Funktionen auswählen und sie in einem einzigen Paket zusammenfassen (oder einzelne Dateien anbieten). Fügen Sie diese in der Reihenfolge hinzu, die am unteren Rand der Seite angezeigt wird.

DataTables hängt von jQuery jquery.dataTables.js es daher vor jquery.dataTables.js :

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

DataTables sind auch über NPM verfügbar

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

und Bower

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