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>