Verwendung
Bei Bedarf enthalten Datentabellen eine Paginierung, die unterhalb der Tabelle angezeigt wird. Diese darf allerdings erst verwendet werden, wenn es sich um größere Datenmengen handelt.
Eine sehr kurze Tabelle auf mehrere Seiten aufzubrechen ist gerade aus Sicht der Nutzenden nicht sinnvoll, auch weil damit der gängige Weg des Suchens in einer Tabelle per Browserfunktion (Strg-F) unterbunden wird. Insbesondere für Screenreader-Nutzende entstehen bei zu kleinteilig paginierten Datenansichten erhebliche Hürden, da hierdurch typische Methoden zur Erkundung von Inhalten in Datentabellen erschwert werden.
Die Paginierung ist als Bestandteil von Datentabellen vorgesehen; Content-Seiten haben eine eigene alternative Paginierung in Form einer einfachen Blätterfunktion mit klassischen Links, die optional die gleiche Gestaltung wie Buttons erhalten können.
Funktionsweise der Paginierung
- Die Einträge pro Seite werden in “10”, “25”, “50”, “100” und “Alle” aufgeteilt. 25 Einträge pro Seite wird als Vorauswahl empfohlen.
- Das Select zur Auswahl der Einträge pro Seite wird erst angezeigt, sobald die vorhandene Anzahl der Einträge größer ist als die kleinstmögliche Auswahl der Einträge pro Seite (10).
- Die Blätterfunktion wird erst angezeigt, sobald die vorhandene Anzahl der Einträge größer ist als die aktuelle Auswahl der Einträge pro Seite.
- Das Springen zur ersten oder letzten Seite wird erst ab der dritten Seite zur Blätterfunktion hinzugefügt.
- Die vorhandene Anzahl der Einträge kann durch eine Filterung der Datenmenge beeinflusst werden. Ergibt eine Filterung eine leere Datenmenge, dann darf die Paginierung nicht angezeigt werden. Gleiches gilt für fehlende Inhalte, z. B. bei einem leeren Postfach ohne Nachrichten – auch hier entfällt die Paginierung.
Ein Beispiel: Die Vorauswahl ist “25”, es liegen aber nur 20 Datensätze zur Anzeige vor, z.B. aufgrund der geringeren Gesamtmenge der Daten oder wegen eines parallel gesetzten Filters. In diesem Fall werden die 20 Datensätze vollständig angezeigt, die Blätter-Funktion entfällt, aber das Select mit den Optionen “10”, “25” (selected), “50”, “100” und “Alle” wird weiterhin angezeigt. Wenn Nutzende nun 50 Einträge pro Ansicht oder mehr auswählen, dann ändert sich an der Darstellung nichts. Wenn Nutzende jedoch “10” auswählen, dann werden die Daten auf zwei Seiten paginiert und die Blätter-Funktion erscheint.
Zusammenspiel von Filtern und Paginierung
Eventuell gesetzte Filter beziehen sich immer auf die gesamten Daten einer paginierten Tabelle; eine Mehrfachauswahl von Elementen einer Tabelle bezieht sich immer nur auf die in der aktuellen Ansicht dargestellten Daten und nicht auch noch auf Daten in paginierten Folgeseiten.
Beschriftung
Wenn in der Paginierung Formularelemente wie zum Beispiel ein Select verwendet werden, dann muss zwingend ein zugeordnetes Label vorhanden sein. Aus Platzgründen bzw. je nach Breakpoint kann dieses optisch ausgeblendet werden. Das Design System stellt hierfür die Klasse .visually-hidden zur Verfügung, die an das Label vergeben wird.
Positionierung & responsives Verhalten
- Die Paginierung nimmt die volle Breite des Layout-Grids ein.
- Die Paginierung wird immer vor dem Footer positioniert. Zwischen Footer und Paginierung bleiben 128px Platz.
- Das Select für die „Einträge pro Seite“ und die Icon-Buttons zur Navigation werden untereinander angeordnet und zentriert.
Ab dem Breakpoint MD (≥ 768px)
- Das Select für die „Einträge pro Seite“ und die Icon-Buttons zur Navigation werden nebeneinander und rechtsbündig angeordnet.
Do’s and Dont’s
So:
- Minimalistische Blätterfunktion
- Nur anzeigen wenn benötigt
So nicht:
- Paginierungen mit einer Unzahl verschiedener Bedienmöglichkeiten
- Paginierung von leeren Trefferlisten
