text: Datatables mit Bootstrap: Durchsuchbare Tabellen mit Javascript | Bootstrapaholic
  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
  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:
  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:
  Die Daten als Tabelle bereitstellen
  Nachdem 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">
  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:
  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:
  "url": "//cdn.datatables.net/plug-ins/1.10.10/i18n/German.json"
  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.
  Dieser Beitrag wurde unter Bootstrap Tutorials abgelegt am 14. Januar 2016 von Christoph Paterok.
  ← Wie erstelle ich meine eigene Webseite? – Planung und Umsetzung reCAPTCHA: Der Spam-Schutz für Dein Kontaktformular →