Kategorien
HTML/CSS JavaScript & jQuery

Mit Clusterize.js Datentabellen schnell darstellen

Wer sehr umfangreiche Datenmengen hat und diese tabellarisch in einem HTML-Dokument darstellen möchte, sollte die Performanz seiner Seite stets im Blick haben. Grundsätzlich ist es zwar möglich, auch eine Tabelle mit mehreren hundert oder tausend Zeilen auszuzeichnen. Allerdings ist es nicht immer ein Vergnügen, sich durch so eine lange Tabelle durchzuarbeiten. Vor allem mit dem Mausrad stellt man schnell fest, dass das Scrollen nicht so flüssig läuft, wie man es eigentlich gewohnt ist. Die Datenmenge der Tabelle macht dem Browser zu schaffen. Clusterize.js ist eine JavaScript-Bibliothek, die Abhilfe schafft, indem es immer nur Teilbereiche einer Tabelle lädt und darstellt.

clusterizejs

Einfaches Konzept, große Wirkung

Clusterize.js setzt zunächst voraus, dass nur ein Ausschnitt einer Tabelle innerhalb eines scrollbaren Containers dargestellt wird. Statt aller Zeilen sind somit nur einige wenige Zeilen zu sehen. Dafür besitzt der Container eine Scrollbar, mit der man sich durch die gesamte Tabelle bewegen kann. Allerdings sorgt Clustize.js dafür, dass nicht die komplette Tabelle geladen wird. Stattdessen ist nur der sichtbare Bereich der Tabelle auch tatsächlich in der DOM-Struktur angelegt. Sobald innerhalb des Tabellencontainers gescrollt wird, werden neue Tabellendaten geladen. Damit die Scrollbar funktioniert, werden nicht sichtbare Bereiche mit einer entsprechenden Höhe versehen. Man kann also wie gewohnt durch eine Tabelle scrollen.

Gerade bei sehr großen Datenmengen ist der Unterschied sehr deutlich bemerkbar. Das automatische Nachladen per JavaScript sorgt dafür, dass immer nur relativ wenige Tabellenzeilen vorhanden sind. Dies sorgt für einen schlanken Quelltext und verhindert Performance-Probleme. Abgesehen vom Geschwindigkeitszuwachs merkt der Benutzer nichts vom Laden der Daten. Das geschieht im Hintergrund.

Tabellen per Clusterize.js laden

Um Clusterize.js verwenden zu können, müssen die JavaScript- und Stylesheet-Datei der Bibliothek am Ende des HTML-Bodys beziehungsweise im HTML-Head eingebunden werden. Anschließend hat man die Wahl zwischen zwei Lademöglichkeiten. Besitzt man bereits eine Tabelle mit allen Zeilen, sorgt Clusterize.js dafür, dass jene Tabellenzeilen zunächst entfernt und in einem Array gespeichert werden, die jenseits des sichtbaren Bereichs liegen. Alternativ kann man auch eine leere Tabelle auszeichnen und die Zeilen direkt als JavaScript-Array übergeben. Dazu müssen die einzelnen Zeilen allerdings per HTML ausgezeichnet sein.

<div class="clusterize">
  <table>
    <thead></thead>
  </table>
  <div id="scrollArea" class="clusterize-scroll">
    <table>
      <tbody id="contentArea" class="clusterize-content">
        <tr class="clusterize-no-data">
          <td>Lade Daten …</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Das Beispiel zeigt exemplarisch, wie eine Tabelle ausgezeichnet sein muss, damit diese per Clusterize.js genutzt werden kann. Damit die Körperzeilen der Tabelle unabhängig von den Kopfzeilen gescrollt werden können, werden zwei „<table>“-Elemente erstellt. Die erste Tabelle enthält somit die feststehenden Kopfzeilen. Die zweite Tabelle, die innerhalb eines „<div>“-Elementes platziert ist, ist scrollbar. Das umschließende Container-Element sorgt dafür, dass nur ein Ausschnitt der Tabelle sichtbar ist. Wichtig ist, dass die entsprechenden Klassen mit angeben werden („clusterize“, „clusterize-scroll“ und „clusterize-content“). Über die IDs des „<div>“-Elementes und des darin enthaltenen „<table>“-Elementes wird die Tabelle per Clusterize.js angesprochen.

var daten = ["<tr>…</tr>", "<tr>…</tr>", …];
var clusterize = new Clusterize({
  rows: daten,
  scrollId: "scrollArea",
  contentId: "contentArea"
});

Da die Tabelle im Beispiel keine Inhalte besitzt, müssen diese über einen Array übergeben werden. Hier ist es der Array „daten“, der komplett ausgezeichnete Zeilen enthält, die jeweils per „<tr>“-Element eingeleitet werden. Dieser Array wird der Option „rows“ des „Clusterize()“-Objektes übergeben. Sind die Zeilen bereits alle innerhalb des „<table>“-Elementes ausgezeichnet, wird die „rows“-Option einfach weggelassen.

Über die Option „scrollId“ wird der Bereich angegeben, der den scrollbaren Bereich definiert, in dem die eigentliche Tabelle liegt. Diese wird per „contentId“ angesprochen.

Mehr ist nicht zu machen. Clusterize.js sorgt eigenständig dafür, dass immer die richtigen Zeilen geladen und angezeigt werden. Das Ganze funktioniert nicht nur mit Tabellen, sondern auch mit Listen. So lassen sich auch sortierte („<ol>“) sowie unsortierte Listen („<ul>“) auf gleiche Weise laden. Sinnvoll ist das natürlich nur, wenn man entsprechend umfangreiche Listen hat, bei denen man mit einer Verbesserung der Performance rechnen kann.

Anzahl der Zeilen pro Block einstellbar

Standardmäßig werden immer 50 Zeilen in einem Block geladen, der dann in der Tabelle platziert wird. Die Anzahl der Zeilen kann man jedoch über die Optionen individuell einstellen. Ist die Tabelle beispielsweise so gestaltet, dass immer mehr als 50 Zeilen zu sehen sind, sollten die zu ladenden Zeilen pro Block erhöht werden.

Ebenfalls einstellbar ist die Anzahl der Blocks pro Cluster. Standardmäßig werden maximal vier Cluster in der Tabelle dargestellt.

var clusterize = new Clusterize({
  …
  rows_in_block: 50,
  blocks_in_cluster: 4
});

Es gibt weitere optionale Einstellungsmöglichkeiten. So gibt es mit „tag“ die Möglichkeit, ein Element zu definieren, welches verwendet werden soll, um die Tabelle aufzufüllen. Wird per „tag“ kein Element angegeben, wählt Clusterize.js“ automatisch ein Passendes aus – zum Beispiel „<tr>“ bei Tabellen und „<li>“ bei Listen. Diesen Platzhalter-Elementen wird dann per CSS-Eigenschaft „height“ eine Höhe zugewiesen, die der Höhe entspricht, welche die nicht geladenen Tabellenzeilen beziehungsweise Listenelementen entsprechen.

clusterizejs_quelltext
Quelltext einer per Clusterize.js veränderten Tabelle: Nicht geladene Zeilen werden als eine Zeile mit entsprechender Höhe dargestellt

Auch wenn das Framework das Laden von Inhalten selbständig regelt, gibt es Methoden, um Daten zu aktualisieren und einer Tabelle neue Zeilen anzuhängen.

clusterize.append();

Das Beispiel mit der Methode „append()“ sorgt dafür, dass neue Daten ans Ende der Tabelle angehängt werden. Dies geschieht normalerweise beim Herunterscrollen. Analog dazu gibt es die Methode „prepend()“, die Daten am Anfang anhängt. Das geschieht normalerweise beim Heraufscrollen.

Browsersupport und Link zum Download

Clusterize.js läuft in allen modernen und auch mobilen Browsern, einschließlich des Internet Explorers ab Version 8. Eine Sache gilt es jedoch zu beachten. Per CSS wird ja eine Höhe für die nicht dargestellten Inhalte definiert. Bei mehreren hundert oder tausend Tabellenzeilen kann diese Höhe schon mal sehr ordentlich ausfallen. Alle Browser haben jedoch unterschiedliche Maximalwerte für Höhenangeben. So können Webkit-Browser zum Beispiel um die 134 Millionen Pixel und Gecko-Browser „nur“ zehn Millionen Pixel Höhe interpretieren. Diese Begrenzungen sollte man zumindest im Hinterkopf haben.

Die Bibliothek steht unter der verbreiteten MIT-Lizenz und kann somit auch kommerziell eingesetzt werden. Wer sich von dem Performance-Unterschied zunächst einmal überzeugen möchte, findet auf der Projekt-Website ein sehr aussagekräftiges Beispiel. Dort kann man eine „normale“ Tabelle mit einer per Clusterize.js optimierten Tabelle vergleichen.

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

1 Anwort auf „Mit Clusterize.js Datentabellen schnell darstellen“

Schreibe einen Kommentar

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