Bootstrap Datatable

Datatables mit Bootstrap: Durchsuchbare Tabellen mit Javascript

Moderne Web-Technologien sorgen dafür, dass webbasierte Softwarelösungen nativen Lösungen beinahe in nichts mehr nachstehen. Die so genannten Datatables tragen dieser Entwicklung maßgeblich bei. Sie machen einfache Tabellen live sortier- und durchsuchbar und sorgen somit für eine gute Nutzererfahrung. Heute zeigen wir, wie sich diese Datatables mit einem einfachen Javascript-Plugin in Bootstrap umsetzen lassen.

Gerade bei der Umsetzung von Verwaltungstools für eine Webseite oder einer webbasierten Software-Lösung sind sie nicht mehr wegzudenken: Die so genannten Datatables. Sie bieten die Funktion, jegliche Tabellen live und sehr schnell zu sortieren und zu durchsuchen.

DataTables.js: Das einfache jQuery Plugin

Das eigene Umsetzen einer solchen Funktionalität wäre mit einem enormen Aufwand verbunden. Deshalb macht es Sinn hier auf ein einfaches und kostenloses jQuery Plugin zurückzugreifen: DataTables.js

DataTable.js

Abbildung 1: Webseite des DataTables.js Plugins

Einbinden der benötigten Dateien

Die benötigten Dateien können mit zwei verschiedenen Möglichkeiten in das eigene Projekt eingebunden werden.

  • Herunterladen der entsprechenden Dateien und manuelles einbinden in das eigene Projekt.
  • Einbinden der Dateien per CDN (Content-Delivery-Network)

Ich persönlich empfehle das Einbinden der entsprechenden Dateien per CDN. Dies hat den Vorteil, dass Webseiten und Software-Lösungen schneller geladen werden. Diese Art und Weise hat zwar den Nachteil, dass somit eine externe Abhängigkeit in das Projekt eingebunden wird, allerdings ist die Wahrscheinlichkeit des Server-Ausfalls eines CDN relativ gering und weniger wahrscheinlich als der Ausfall des eigenen Servers.

In den <head>-Bereich der Webseite sollte nach dem Bootstrap-Core-CSS das Stylesheet von DataTables.js eingebunden werden:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>

Am Ende der Datei, und zwar nach dem Einbinden von jQuery und nach dem Einbinden der Bootstrap-Core-JS muss die Javascript-Datei von DataTables.js eingebunden werden:

<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

Die Daten als Tabelle bereitstellen

HTML-TabelleNachdem wir die Basis für unsere Datentabelle geschaffen haben und das DataTable.js Plugin in unser Projekt eingebunden haben, wird es Zeit Daten bereitzustellen. Auch das ist sehr simpel, denn es gilt lediglich eine ganz normale HTML-Tabelle zu erstellen. Die Anzahl der Spalten und Zeilen spielt dabei keine Rolle.

Der Vorteil beim Arbeiten mit Bootstrap ist, dass bereits perfekt gestylte Elemente zur Verfügung stehen. So auch bei den Tabellen. Welche Styles und Darstellungsmöglichkeiten es gibt, haben wir in unserem Handbuch-Eintrag zur Bootstrap Tabelle bereits ausführlich beschrieben.

Ist die Tabelle erstellt, sollte sie eine eindeutige ID erhalten. Dies kann ganz einfach wie folgt aussehen:

<table class="table" id="beispiel">
     <tr>
          <td>...
     ...

Seite fertig geladen – Datatable starten

Wir sind nun an dem Punkt, das jQuery Plugin mit unseren Daten zu verknüpfen und somit die Datentabelle zu erzeugen. Dies passiert wieder sehr einfach:

<script type="text/javascript" charset="utf-8">
     $(document).ready(function() { 
          $('#beispiel').DataTable(); 
     } );
</script>

Folgendes ist zu beachten:

  • Das Aufrufen der DataTable-Funktion darf erst nach dem Einbinden der DataTable.js erfolgen, denn sonst kennt unsere Software diese Funktion noch nicht.
  • Der Selektor muss richtig gesetzt werden. Dieser muss unsere Daten-Tabelle ansprechen.

Nun sollte die Datentabelle richtig geladen und dargestellt werden.

Deutsche Beschriftung aktivieren

Eine Sache mit der ich persönlich am Anfang etwas länger Zeit verbracht habe, war das Umstellen auf die deutsche Beschriftung. Deswegen möchte ich euch die Zeit sparen und hier gleich erklären, wie es funktioniert.

Selbstverständlich steht eine riesige Auswahl an Sprachdateien zur Verfügung: https://www.datatables.net/plug-ins/i18n/

Alle Sprachdateien stehen im JSON-Format zur Verfügung und können ebenfalls manuell heruntergeladen uns ins Projekt integriert werden oder per CDN eingebunden werden. Dazu muss die DataTable-Funktion einfach ein entsprechendes Attribut mit übergeben bekommen. Wenn wir also die deutsche Sprache nutzen möchten, dann sieht das Starten der DataTable-Funktion wie folgt aus:

<script type="text/javascript" charset="utf-8">
     $(document).ready(function() { 
          $('#beispiel').DataTable({
               "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/German.json"
               }
          }); 
     } );
</script>

Wenn die Seite jetzt neu geladen wird, sind alle Button und Formular Texte in deutsch vorhanden.

Hat bei bei Dir alles geklappt? Hast Du noch Fragen? Wir freuen uns auf Deinen Kommentar.

Du möchtest regelmäßig mit interessanten Neuigkeiten zum Thema "Twitter Bootstrap" versorgt werden? Trag Dich in den Bootstrapaholic Newsletter ein. Wir versenden keinen Spam! Du kannst Dich jederzeit austragen.

Dieser Beitrag wurde unter Bootstrap Tutorials abgelegt am von .

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>