Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Denis Potschien 12. Dezember 2014

Dynatable für jQuery: Interaktives Tabellen-Plugin sorgt für flexible Datenpräsentation

Tabellen sind immer dann hilfreich, wenn sie umfangreiche Informationen übersichtlich darstellen sollen. Im Web haben Tabellen zudem den Vorteil, dass sie nicht statisch sein müssen. Sie können unterschiedlich sortiert, gefiltert und durchsucht werden. Das jQuery-Plugin „Dynatable“ hilft dabei, Tabellen dynamisch zu machen und sie um die genannten Funktionen zu erweitern. Außerdem ist es mit dem Plugin möglich, große Tabellen zu paginieren und somit kompakter darzustellen.

dynatable1

Datenquelle für „Dynatable“ definieren

Um Dynatable in einem Dokument nutzen zu können, müssen Sie das Plugin gemeinsam mit jQuery einbinden. Optional kann auch das Stylesheet des Plugins verwendet werden. Weitere Abhängigkeiten bestehen nicht.

Sodann können Sie sich an die Definition einer Datenquelle für eine dynamische Tabelle begeben. Dies kann eine bereits existierende HTML-Tabelle, aber auch ein JSON-Objekt sein, welches die darzustellenden Daten in einem bestimmten Format beinhaltet.

<table id="laender">
  <thead>
    <tr><th>Land</th><th>Bevölkerung</th><th>Fläche</th></tr>
  </thead>
  <tbody>
    <tr><td>Belgien</td><td>11.203.992</td><td>30.510</td></tr>
    …
  </tbody>
</table>

Damit das Plugin die Tabelle korrekt interpretiert, ist es wichtig, dass die Spaltenüberschriften per „<thead>“ ausgezeichnet werden. Ob innerhalb dieses Elements die einzelnen Zellen „<td>“ oder „<th>“ tragen, spielt keine Rolle.

Um „Dynatable“ auf eine Tabelle anzuwenden, genügt ein einfacher Aufruf des Plugins per jQuery und Zuweisung der ID der Tabelle.

$("#laender").dynatable();

Der Aufruf im Beispiel sorgt dafür, dass die Tabelle fortan unterschiedliche Sortierungen erfahren kann. Per Klick auf eine Spaltenüberschrift wird die Tabelle entsprechend der ausgewählten Spalte sortiert. Das Plugin ergänzt Pfeile hinter der jeweiligen Spaltenüberschrift. So wird kenntlich gemacht, nach welcher Spalte und in welche Richtung die Tabelle derzeit geordnet wird.

Suche und Paginierung anpassen

Standardmäßig sind immer nur zehn Zeilen einer Tabelle zu sehen. Darunter befindet sich daher eine Paginierung, mit der man durch die Tabelle klicken kann. Darüber ist eine Dropdownliste dargestellt, über welche die Anzahl der darzustellenden Zeilen pro Seite geändert werden kann. Außerdem gibt es ein Eingabefeld, welches die Tabelle durchsuchbar macht. Es werden dann nur die Zeilen angezeigt, die Werte enthalten, welche zum Suchbegriff passen. Über die Option „features“ wird festgelegt, ob Paginierung und Suchfeld darzustellen sind.

$("#laender").dynatable({
  features: {
    paginate: false,
    search: false,
    sort: false
  }
});

Schalten wir die Paginierung aus, sind natürlich alle vorhandenen Tabellenzeilen sichtbar. Im Beispiel werden Paginierung („paginate“), Suchfeld („search“) und die Sortierung („sort“) ausgeschaltet. Somit sind alle standardmäßig aktivierten Features deaktiviert.

Natürlich ist es auch möglich, die Werte für die Dropdownliste zur Auswahl der Zeilen pro Seite vorzugeben.

$("#laender").dynatable({
  dataset: {
    perPageDefault: 5,
    perPageOptions: [5, 10, 15]
  }
});

Im Beispiel wird per „perPageDefault“ die Anzahl der Zeilen pro Seite auf fünf festgesetzt. Mit „perPageOptions“ wird festgelegt, welche anderen Werte für die Anzahl der Zeilen einstellbar sein sollen.

dynatable2
Beispiel für eine „Dynatable“-Tabelle

Da die Paginierung, sowie die Auswahl- und Suchfelder dynamisch vom Plugin ergänzt werden, werden die entsprechenden Bezeichnungen in Englisch vom Plugin vergeben. Es ist aber möglich, die Bezeichnungen für die einzelnen Felder individuell zu benennen.

$("#laender").dynatable({
  inputs: {
    paginationPrev: "zurück",
    paginationNext: "weiter"
  }
});

Neben den beiden im Beispiel genannten Eigenschaften „paginationPrev“ und „pagninationNext“ gibt es weitere Eigenschaften, um die unterschiedlichen Felder des Plugins zu bezeichnen. So kann alles beispielsweise auf Deutsch angegeben werden.

JSON-Objekt per Ajax laden

Gerade bei sehr großen Datenmengen ist es sinnvoll, diese nicht direkt als HTML-Tabelle auszuzeichnen, sondern per Ajax zu laden. Dank der Paginierungs- und Suchfunktion müssen nicht alle Daten auf einmal geladen werden. Das Plugin lädt immer nur so viele Daten in die Tabelle, wie gerade angezeigt werden sollen.

Wichtig ist, dass die Daten im JSON-Objekt in einem bestimmten Format hinterlegt sein müssen. Alle Tabellenwerte müssen innerhalb des Arrays „records“ liegen.

{
  "records": [
    {
      "land": "Belgien",
      "bevoelkerung": "11.203.992",
      "flaeche": "30.510"
    },
     …
  ]
}

Die Tabelle, in welcher die JSON-Werte dargestellt werden sollen, wird in HTML bereits angelegt – zumindest das Tabellengerüst, welches die erste Zeile mit den Spaltenüberschriften beinhaltet.

<table id="laender">
  <thead>
    <tr><th>Land</th><th data-dynatable-column="bevoelkerung">Bevölkerung</th><th data-dynatable-column="flaeche">Fläche</th></tr>
  </thead>
</table>

Damit „Dynatable“ die Werte aus dem JSON-Objekt den richtigen Spalten der Tabelle zuordnen kann, müssen die Schlüssel der JSON-Eigenschaften mit den Spaltenüberschriften der Tabelle übereinstimmen. Groß- und Kleinschreibung sowie Leerzeichen werden dabei ignoriert. Umlaute und andere Sonderzeichen werden jedoch nicht berücksichtigt. Um die Werte auch bei Umlauten in den Überschriften zuordnen zu können, gibt es das Data-Attribut „data-dynatable-column“. Hier wird der entsprechende Schlüssel der JSON-Eigenschaft hinterlegt. Dann spielt die Spaltenüberschrift keine Rolle mehr.

Um das JSON-Objekt in die Tabelle zu laden, ist anschließend noch der Plugin-Aufruf nötig.

$("#laender").dynatable({
  dataset: {
    ajax: true,
    ajaxUrl: "laender.json",
    records: []
  }
 });

Über die Eigenschaft „ajax“ wird der Ajax-Modus eingeschaltet. Dieser sorgt dafür, dass immer nur ein Teil der Daten aus dem JSON-Objekt geladen werden. Ist der Ajax-Modus ausgeschaltet, werden alle Daten gleichzeitig geladen. Über „ajaxUrl“ wird die JSON-Datei referenziert. Letztendlich muss „records“ noch definiert werden, um dahin die JSON-Werte übergeben zu können.

Individuelles Sortieren und Filtern

„Dynatable“ hat noch weitere Sortierungsmöglichkeiten. So ist es möglich, eine Tabelle anhand einer versteckten Spalte zu sortieren. Das ist dann interessant, wenn man Werte nicht numerisch in einer Spalte darstellt, sondern als Text – statt „2014“ beispielsweise „Zweitausendvierzehn“. Um die Tabelle dennoch chronologisch nach Jahren darzustellen, gibt es die Möglichkeit, eine versteckte Spalte anzulegen.

<table id="chinesischer-kalender">
  <thead>
    <tr><th>Bezeichnung</th><th data-dynatable-sorts="jahrAlsZahl">Jahr</th><th style="display: none">Jahr als Zahl</th></tr>
  </thead>
  <tbody>
    <tr><td>Jahr des Pferdes</td><td>Zeitausendvierzehn</td><td>2014</td></tr>
  </tbody>
  …
</table>

Im Beispiel gibt es eine Spalte mit Jahresangaben in ausgeschriebener Form. Daneben gibt es eine versteckte Spalte mit numerischen Werten. Über „data-dynatable-sorts“ wird festgelegt, dass die Spalte „Jahr“ so zu sortieren ist, wie die Spalte „Jahr als Zahl“ sortiert wird.

Es gibt auch die Möglichkeit, die Tabelle anhand vordefinierter Werte für bestimmte Spalten zu filtern. So lassen sich beispielsweise Jahreszahlen in einer Dropdown-Liste angeben und auswählen.

<select id="jahresauswahl" name="jahr">
  <option></option>
  <option>2014</option>
  <option>2013</option>
  …
</select>

Per JavaScript wird das „<select>“-Element an die Tabelle gebunden, so dass diese den entsprechenden Filter anwenden kann.

$("#jahresauswahl").change(function() {
  if ($(this).val() === "") {
    $("#chinesicher-kalender").dynatable().data("dynatable").queries.remove("jahr");
  } else {
    $("#chinesicher-kalender").dynatable().data("dynatable").queries.add("jahr", $(this).val());
  }
  $("#chinesicher-kalender").dynatable().data("dynatable").process();
});

Fazit

Die hier dargestellten Möglichkeiten von „Dynatable“ spiegeln nur eine kleine Auswahl dessen wider, was das Plugin kann. Zusammen mit dem JavaScript-Framework „Highcharts“ ist es beispielsweise möglich, aus Tabellen schicke Diagramme zu zaubern. „Dynatable“ ist gut und umfangreich dokumentiert, so dass der Einstieg nicht schwer fällt. „Dyntable“ steht unter der AGPL-Lizenz und kann in persönlichen, nicht-kommerziellen Projekten kostenfrei eingesetzt werden. Für eine kommerzielle Nutzung des Plugins muss jedoch eine entsprechende Lizenz erworben werden, die ab 95 Dollar erhältlich ist.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Ein Kommentar

  1. Erinnert mich an jQuery Bootgrid, wobei Bootgrid auch für kommerzielle Zwecke kostenlos ist.

Schreibe einen Kommentar

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