Pagination Listen

Die pagination Komponente zeigt Navigationselemente für paginierte Daten an. Sie lässt sich in den Paginator von Django integrieren und unterstützt die Auswahl der Anzahl der Einträge pro Seite.

WCAG AA
HTMX

Funktionen

  • Seitennavigation: Schaltflächen für „Erste Seite“, „Vorherige Seite“, „Nächste Seite“ und „Letzte Seite“.

  • Seitenzahlen: Direkter Zugriff auf benachbarte Seiten, wobei Lücken durch Auslassungspunkte gekennzeichnet sind.

  • Einträge pro Seite: Optionale Auswahlfunktion zum Ändern der Seitengröße.

  • Django-Integration: Funktioniert mit den „Page“-Objekten des Django-Paginators.

HTML

Verwendung

Die Komponente wird über das pagination Tag eingebunden.

{% load insight_tags %} <div id="list-container"> <!-- Actual list --> {% pagination config=pagination_config %} </div> <!-- or --> <div id="list-container"> <!-- Actual list --> {% pagination current_page=start_page surrounding_pages=surrounding_pages %} </div>

Parameter

Laden…

config (PaginationConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
request_url str

URL für den Seitenwechsel.

 None True
current_page Page

Ein von Django erzeugtes Pagination-Objekt der aktuellen Seite.

 None True
surrounding_pages list[int]

Liste der anzuzeigenden benachbarten Seitenzahlen. -1 für Auslassungspunkte („...“).

 [] False
ipp_config

Optionale Konfiguration für die Auswahl der Anzahl der Einträge pro Seite.

 None False
PaginationConfig( request_url="/product-list/", current_page=paginator.page(1), surrounding_pages=[1, 2, 3, -1, 10], ipp_config=PaginationIppConfig(options=[10, 25, 50]), )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Komponente verwendet <nav> mit role='navigation' und aria-label='Pagination'.

  • Navigations-Buttons verwenden sr-only-Text, um beschreibende Bezeichnungen für Screenreader bereitzustellen.

  • Deaktivierte Buttons erklären ihren Status (z. B. „Deaktiviert, da es keine vorherigen Seiten mehr gibt“).

  • Die aktuelle Seite ist mit aria-current='page' gekennzeichnet.

  • Die Informationen zur aktuellen Seite werden auf Mobilgeräten als Text angezeigt.

Verwandte Themen