Sortierbare, filterbare, responsive Tabellen in Onlinedokumentation

Eine Tabelle auf dem Bildschirm genauso anzuzeigen wie auf Papier, nutzt nicht die Möglichkeiten des Mediums. In einer Onlinedokumentation kann es benutzerfreundlicher sein, wenn Leser eine Tabelle bei Bedarf z. B. automatisch sortieren oder sogar filtern können.

Steht auf einer kleinen Anzeige nicht genug Platz für eine breite Tabelle zur Verfügung, kann sich die Tabelle „responsive“ verhalten und intelligent an die Situation anpassen. Zum Beispiel kann dann der Inhalt bestimmter Spalten untereinander statt nebeneinander erscheinen.

Mit Hilfe einer geeigneten JavaScript-Bibliothek können Sie dies umsetzen.

Beispiel 1: Einfache sortierbare Tabelle

Folgendes Beispiel zeigt eine elementare Sortierfunktion für Tabellen, die sich vergleichsweise schnell mit den meisten Redaktionssystemen implementieren und auch auf bereits bestehende Tabellen anwenden lässt.

Klicken Sie in der Kopfzeile auf den jeweiligen Spaltentitel, um die Tabelle zu sortieren:

First Name	Last Name
Bill	Yard
Mary	Huana
Jo	Ker
Anna	Bolika
Matt	Erial
Nick	Otin
Jack	Ett
Dick	Tator

Implementierung zu Beispiel 1

Diese Lösung nutzt die Open-Source-JavaScript-Bibliothek tablesort.

Anmerkung: Für sortierbare Tabellen sollten Sie generell kein Tabellendesign mit alternierenden Zeilenfarben verwenden. Andernfalls stimmen die Farben nach dem Sortieren nicht mehr.

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:


th[role=columnheader]:not(.no-sort) {
  cursor: pointer;
}
th[role=columnheader]:not(.no-sort):after {
  content: '';
  float: right;
  margin-top: -22px;
  border-width: 0 6px 6px;
  border-style: solid;
  border-color: #404040 transparent;
  visibility: hidden;
  opacity: 0;
  user-select: none;
}
th[aria-sort=ascending]:not(.no-sort):after {
  border-bottom: none;
  border-width: 6px 6px 0;
}
th[aria-sort]:not(.no-sort):after {
  visibility: visible;
  opacity: 0.4;
}
th[role=columnheader]:not(.no-sort):hover:after {
  visibility: visible;
  opacity: 1;
}

Schritt 2: Verlinken Sie im Head-Abschnitt Ihrer Seitenvorlage auf die benötigten JavaScript-Dateien der Bibliothek (passen Sie die Pfade wie erforderlich an).


<script src="YOUR-PATH/tablesort.min.js"></script>
<!-- Include needed sort types -->
<script src="YOUR-PATH/tablesort.number.min.js"></script>
<script src="YOUR-PATH/tablesort.date.min.js"></script>

Schritt 3: Erstellen Sie die Tabelle ganz normal mit den Bordmitteln Ihres Redaktionssystems. Sofern Ihr Redaktionssystem im erzeugten HTML-Code nicht bereits jeder Tabelle eine ID zuweist, müssen Sie selbst der Tabelle eine ID zuweisen. Wo und wie dies geht, hängt von Ihrem Redaktionssystem ab. Wenn Sie z. B. eine ID namens mytable-01 zuweisen, muss dies im erzeugten HTML-Code am Ende wie folgt aussehen:


...
<table id="mytable-01" … >
...

Falls Sie mehrere sortierbare Tabellen im selben Topic haben, benötigt jede dieser Tabellen eine andere ID.

Schritt 4: Fügen Sie am Ende des Topics abschließend noch ein kleines JavaScript ein, das jede der sortierbaren Tabellen initialisiert.


<script>
  new Tablesort(document.getElementById('mytable-01'));
  ...
</script>

Beispiel 2: Sortierbare, filterbare, responsive Tabellen

Das folgende Beispiel zeigt eine deutlich funktionsreichere Lösung, die jedoch auch aufwendiger zu implementieren ist.

Auch hier können Sie die Tabelle wieder sortieren. Testen Sie außerdem einmal das Verhalten, wenn Sie das Browserfenster so schmal machen, dass nicht mehr alle Spalten Platz haben.

ID	First Name	Last Name	Job Title	Started On	Date of Birth
1	Bill	Yard	Gambler	November 8th 2011	July 25th 1960
2	Mary	Huana	Social Worker	October 15th 2010	March 30th 1982
3	Jo	Ker	Clown	November 28th 2013	February 26th 1966
4	Anna	Bolika	Personal Trainer	October 31st 2010	March 29th 1966
5	Matt	Erial	Engineer	December 29th 2011	September 22nd 1964
6	Nick	Otin	Doctor	November 12th 2012	August 4th 1991
7	Jack	Ett	Stock Broker	August 14th 2012	November 20th 1979
8	Dick	Tator	Politician	September 21st 2010	April 7th 1969

In der folgenden Variante können Sie den Inhalt sogar filtern.

ID	First Name	Last Name	Job Title	Started On	Date of Birth	Info
1	Bill	Yard	Gambler	November 8th 2011	July 25th 1960	Info link
2	Mary	Huana	Social Worker	October 15th 2010	March 30th 1982	Info link
3	Jo	Ker	Clown	November 28th 2013	February 26th 1966	Info link
4	Anna	Bolika	Personal Trainer	October 31st 2010	March 29th 1966	Info link
5	Matt	Erial	Engineer	December 29th 2011	September 22nd 1964	Info link
6	Nick	Otin	Doctor	November 12th 2012	August 4th 1991	Info link
7	Jack	Ett	Stock Broker	August 14th 2012	November 20th 1979	Info link
8	Dick	Tator	Politician	September 21st 2010	April 7th 1969	Info link

Implementierung zu Beispiel 2

Diese Lösung nutzt die Open-Source-JavaScript-Bibliothek FooTable Version 2.

Die Lösung setzt außerdem voraus, dass die externen Bibliotheken jQuery und Font Awesome in Ihre Onlinedokumentation eingebunden sind. Falls dies nicht bereits seitens Ihres Redaktionssystems der Fall ist, richten Sie dies im Vorfeld manuell ein.

Schritt 1: Verlinken Sie im Head-Abschnitt Ihrer Seitenvorlage auf die CSS-Datei und auf die JavaScript-Datei der Bibliothek (passen Sie die Pfade wie erforderlich an).


<link rel="stylesheet" href="YOUR-PATH/footable.standalone.min.css">
<script src="YOUR-PATH/footable.min.js"></script>

Schritt 2: Fügen Sie die Tabellen in Ihr Topic ein. Der für eine Tabelle benötigte HTML-Code ist bei Einsatz dieser Bibliothek etwas komplexer. Ob Sie diesen Code besser mit einem Texteditor erstellen und dann als HTML-Schnipsel einfügen, oder mit den Bordmitteln Ihres Redaktionssystems erstellen, hängt von Ihrem Redaktionssystem ab.

> Der für die erste Tabelle benötigte HTML-Code sieht in unserem Beispiel wie folgt aus:


<table class="table" data-sorting="true">
 <thead>
  <tr>
   <th data-breakpoints="xs" data-type="number">ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th data-breakpoints="xs">Job Title</th>
   <th data-breakpoints="xs sm" data-type="date" data-format-string="MMMM Do YYYY">Started On</th>
   <th data-breakpoints="xs sm md" data-type="date" data-format-string="MMMM Do YYYY">Date of Birth</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>Bill</td>
   <td>Yard</td>
   <td>Gambler</td>
   <td>November 8th 2011</td>
   <td>July 25th 1960</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Mary</td>
   <td>Huana</td>
   <td>Social Worker</td>
   <td>October 15th 2010</td>
   <td>March 30th 1982</td>
  </tr>
  <tr>
   <td>3</td>
   <td>Jo</td>
   <td>Ker</td>
   <td>Clown</td>
   <td>November 28th 2013</td>
   <td>February 26th 1966</td>
  </tr>
  <tr>
   <td>4</td>
   <td>Anna</td>
   <td>Bolika</td>
   <td>Personal Trainer</td>
   <td>October 31st 2010</td>
   <td>March 29th 1966</td>
  </tr>
  <tr>
   <td>5</td>
   <td>Matt</td>
   <td>Erial</td>
   <td>Engineer</td>
   <td>December 29th 2011</td>
   <td>September 22nd 1964</td>
  </tr>
  <tr>
   <td>6</td>
   <td>Nick</td>
   <td>Otin</td>
   <td>Doctor</td>
   <td>November 12th 2012</td>
   <td>August 4th 1991</td>
  </tr>
  <tr>
   <td>7</td>
   <td>Jack</td>
   <td>Ett</td>
   <td>Stock Broker</td>
   <td>August 14th 2012</td>
   <td>November 20th 1979</td>
  </tr>
  <tr>
   <td>8</td>
   <td>Dick</td>
   <td>Tator</td>
   <td>Politician</td>
   <td>September 21st 2010</td>
   <td>April 7th 1969</td>
  </tr>
 </tbody>
</table>

> Der HTML-Code für die zweite Tabelle des Beispiels lautet:


<table class="table" data-filtering="true">
 <thead>
  <tr>
   <th data-breakpoints="xs">ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th data-breakpoints="xs">Job Title</th>
   <th data-breakpoints="xs sm">Started On</th>
   <th data-breakpoints="xs sm md">Date of Birth</th>
   <th data-type="html" data-breakpoints="xs sm md">Info</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>Bill</td>
   <td>Yard</td>
   <td>Gambler</td>
   <td>November 8th 2011</td>
   <td>July 25th 1960</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>2</td>
   <td>Mary</td>
   <td>Huana</td>
   <td>Social Worker</td>
   <td>October 15th 2010</td>
   <td>March 30th 1982</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>3</td>
   <td>Jo</td>
   <td>Ker</td>
   <td>Clown</td>
   <td>November 28th 2013</td>
   <td>February 26th 1966</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>4</td>
   <td>Anna</td>
   <td>Bolika</td>
   <td>Personal Trainer</td>
   <td>October 31st 2010</td>
   <td>March 29th 1966</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>5</td>
   <td>Matt</td>
   <td>Erial</td>
   <td>Engineer</td>
   <td>December 29th 2011</td>
   <td>September 22nd 1964</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>6</td>
   <td>Nick</td>
   <td>Otin</td>
   <td>Doctor</td>
   <td>November 12th 2012</td>
   <td>August 4th 1991</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>7</td>
   <td>Jack</td>
   <td>Ett</td>
   <td>Stock Broker</td>
   <td>August 14th 2012</td>
   <td>November 20th 1979</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>8</td>
   <td>Dick</td>
   <td>Tator</td>
   <td>Politician</td>
   <td>September 21st 2010</td>
   <td>April 7th 1969</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
 </tbody>
</table>

Schritt 3: Fügen Sie am Ende des Body-Abschnitts Ihrer Seitenvorlage ein HTML-Schnipsel mit folgendem Skript ein, um die Tabellen zu initialisieren:


<script>
 jQuery(function($){
 $('.table').footable();
 });;
</script>

___

Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.