Lokales Sortieren und Suchen mit «DataTables»

Tabellen in Internetseiten werden für den Benutzer erst dann komfortabel, wenn der Inhalt sortier- und durchsuchbar wird und es eine vernünftige Paginierung gibt. Genau das stellt aber den Entwickler vor eine Herausforderung. Technisch ist es zwar nicht schwierig, diese Punkte serverseitig umzusetzen, aber es ist eine Menge Arbeit und muss meistens für jede Tabelle einzeln angepasst werden. Für den Besucher der Seiten kommt hinzu, dass er lästige Wartezeiten hat, bis die neue Seite geladen ist.

DataTables im Einsatz

DataTables im Einsatz in einem Job Scheduler

Mit DataTables von Allan Jardine gibt es ein jQuery-Plugin, das einem mit wenigen Zeilen JS die gesamte Arbeit abnimmt. Die folgenden Schritte müssen durchgeführt werden, um DataTables zu integrieren.

  • jQuery einbinden
  • DataTables einbinden
  • CSS von DataTables einbinden
  • IDs und Klassen für die Tabelle benennen
  • DataTables aktivieren

Für die Minimalkonfiguration sieht das Aktivierungsscript so aus:

Mit diesem Mini-Script sind sofort die Sortierung, die clientseitige Suche, Paginierung, Auswahl für die Anzahl der anzuzeigenden Tabellenzeilen, und Anzeige der Anzahl der Datensätze aktiviert.

DataTables bietet sehr umfangreiche Konfigurationsmöglichkeiten, die dazu auch noch sehr gut mit Beispielen dokumentiert sind. Die erste Abbildung auf dieser Seite zeigt den Einsatz von DataTables in einem Projekt, einem Job Scheduler, das ich in wenigen Tagen hier veröffentlichen werde. Mit der folgenden Konfiguration wird die Sprache auf deutsch umgestellt, die Anordnung der Informations- und Bedienelemente für die Tabelle bestimmt und eine Abwärtssortierung für die achte Spalte definiert.

Zwei Dinge sollte man allerdings beim Einsatz von DataTables beachten: Die clientseitige Sortierung ist nur dann zu gebrauchen, wenn der Rechner die Aufgabe auch zügig abarbeiten kann, d.h. ab einer gewissen Zahl von Datensätzen wird es einfach zu langsam, das muss man allerdings im Einzelfall testen. Bei meinen Webapplications liegt der Wert irgendwo zwischen 1000 und 1500 Datensätzen, das mal als Richtschnur. Die zweite Sache ist: Bei deaktiviertem Javascript funktioniert DataTables natürlich nicht mehr.

In der Vergangenheit habe ich den Tablesorter von Christian Bach zum clientseitigem Sortieren von Tabellen genutzt. Ebenfalls ein sehr gutes Plugin, allerdings bin ich irgendwann an die Grenzen gestoßen, weil die Konfigurationsmöglichken, die Individualisierungsmöglichkeiten, weit hinter DataTables liegen.

Coding, jQuery, MySQL, PHP, Webapplication, Webentwicklung