Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Pagination

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Paginierung für nummerierte Seiten, Vor-/Weiter-Pfeile, Auslassungspunkte, zugängliche Radioeingänge und eine Seitensprungauswahl. Kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Mit Paginierungskomponenten können Benutzer zwischen Inhaltsseiten navigieren – Suchergebnissen, Datentabellen, Artikelarchiven und Produktlisten. Die Frutjam-Paginierung besteht aus den Komponenten Join und Button und erfordert kein JavaScript und kein zusätzliches CSS. Unterstützt nummerierte Seiten, Vorher/Vorwärts-Pfeile, Auslassungspunkte, zugängliche Funkeingänge und eine Seitensprungauswahl.

Nur CSS, kein JavaScript erforderlich – erstellen Sie eine barrierefreie Paginierung mit reinem HTML und Tailwind CSS. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React, Next.js und jedem Stack.

Klasse Typ Beschreibung
joinBaseGruppiert Schaltflächen in einem verbundenen Paginierungsstreifen
join-itemModifikatorJede Seitenschaltfläche oder Eingabe innerhalb des Joins
btn-activeStateHebt die aktuelle Seite hervor
btn-disabledStateNicht interaktive Auslassungspunkte oder nicht verfügbare Seite

Grundlegende Paginierung

Ein nummerierter Seitenstreifen mit einer aktiven Seite. Wenden Sie btn-active an, um die aktuelle Seite hervorzuheben. Verwenden Sie Ankertags anstelle von Schaltflächen für vom Server gerenderte Seitenlinks.

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn btn-active">2</button>
  <button class="join-item btn">3</button>
  <button class="join-item btn">4</button>
  <button class="join-item btn">5</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn btn-active">2</button>
  <button className="join-item btn">3</button>
  <button className="join-item btn">4</button>
  <button className="join-item btn">5</button>
</div>

Größen

Die Paginierung übernimmt alle Schaltflächengrößen. Verwenden Sie btn-xs oder btn-sm für kompakte Tabellen und btn-lg für Touch-First-Schnittstellen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="flex flex-col gap-3 items-start">
  <div class="join">
    <button class="join-item btn btn-xs">1</button>
    <button class="join-item btn btn-xs btn-active">2</button>
    <button class="join-item btn btn-xs">3</button>
    <button class="join-item btn btn-xs">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-sm">1</button>
    <button class="join-item btn btn-sm btn-active">2</button>
    <button class="join-item btn btn-sm">3</button>
    <button class="join-item btn btn-sm">4</button>
  </div>
  <div class="join">
    <button class="join-item btn">1</button>
    <button class="join-item btn btn-active">2</button>
    <button class="join-item btn">3</button>
    <button class="join-item btn">4</button>
  </div>
  <div class="join">
    <button class="join-item btn btn-lg">1</button>
    <button class="join-item btn btn-lg btn-active">2</button>
    <button class="join-item btn btn-lg">3</button>
    <button class="join-item btn btn-lg">4</button>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div className="flex flex-col gap-3 items-start">
  <div className="join">
    <button className="join-item btn btn-xs">1</button>
    <button className="join-item btn btn-xs btn-active">2</button>
    <button className="join-item btn btn-xs">3</button>
    <button className="join-item btn btn-xs">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-sm">1</button>
    <button className="join-item btn btn-sm btn-active">2</button>
    <button className="join-item btn btn-sm">3</button>
    <button className="join-item btn btn-sm">4</button>
  </div>
  <div className="join">
    <button className="join-item btn">1</button>
    <button className="join-item btn btn-active">2</button>
    <button className="join-item btn">3</button>
    <button className="join-item btn">4</button>
  </div>
  <div className="join">
    <button className="join-item btn btn-lg">1</button>
    <button className="join-item btn btn-lg btn-active">2</button>
    <button className="join-item btn btn-lg">3</button>
    <button className="join-item btn btn-lg">4</button>
  </div>
</div>

Mit Ellipse

Verwenden Sie btn-disabled für die Lücke mit Auslassungspunkten zwischen einem großen Seitenbereich. Bildschirmleseprogramme überspringen deaktivierte Schaltflächen. Kombinieren Sie sie daher mit aria-hidden="true" in den Auslassungspunkten.

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn">1</button>
  <button class="join-item btn">2</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn btn-active">12</button>
  <button class="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button class="join-item btn">99</button>
  <button class="join-item btn">100</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn">1</button>
  <button className="join-item btn">2</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn btn-active">12</button>
  <button className="join-item btn btn-disabled" aria-hidden="true">...</button>
  <button className="join-item btn">99</button>
  <button className="join-item btn">100</button>
</div>

Vorherige/nächste Navigation

Die pfeilbasierte Paginierung ist das häufigste Muster für Blogs, Produktlisten und alle paginierten Feeds, bei denen die Angabe exakter Seitenzahlen nicht praktikabel ist.

Mit Pfeilsymbolen

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button class="join-item btn">Page 12</button>
  <button class="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn" aria-label="Previous page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button className="join-item btn">Page 12</button>
  <button className="join-item btn" aria-label="Next page">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</div>

Gleiche Breite Vorheriges/Nächstes

Verwenden Sie einen grid grid-cols-2-Wrapper für den Join-Container, um beiden Schaltflächen die gleiche Breite zu verleihen – ideal für Mobile-First-Layouts und Paginierungsleisten in voller Breite.

1
2
3
4
<div class="join grid grid-cols-2 w-72">
  <button class="join-item btn btn-outline">← Previous</button>
  <button class="join-item btn btn-outline">Next →</button>
</div>

1
2
3
4
<div className="join grid grid-cols-2 w-72">
  <button className="join-item btn btn-outline">← Previous</button>
  <button className="join-item btn btn-outline">Next →</button>
</div>

Mit Erstem/Letztem

Fügen Sie Doppelpfeilschaltflächen hinzu, damit Benutzer direkt zur ersten oder letzten Seite springen können. Nützlich für Datentabellen mit Hunderten von Seiten.

1
2
3
4
5
6
7
8
9
<div class="join">
  <button class="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-sm">4</button>
  <button class="join-item btn btn-sm btn-active">5</button>
  <button class="join-item btn btn-sm">6</button>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
  <button class="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

1
2
3
4
5
6
7
8
9
<div className="join">
  <button className="join-item btn btn-ghost btn-sm" aria-label="First page">«</button>
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-sm">4</button>
  <button className="join-item btn btn-sm btn-active">5</button>
  <button className="join-item btn btn-sm">6</button>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
  <button className="join-item btn btn-ghost btn-sm" aria-label="Last page">»</button>
</div>

Barrierefreie Radio-Paginierung

Verwenden Sie type="radio"-Eingaben als Join-Elemente für eine vollständig über die Tastatur navigierbare, reine CSS-Seitenauswahl ohne JavaScript. Jede Eingabe fungiert als drückebare Schaltfläche, während der ausgewählte Status im nativen Formularstatus beibehalten wird.

1
2
3
4
5
6
7
<div class="join">
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="2" checked />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input class="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

1
2
3
4
5
6
7
<div className="join">
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="1" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="2" defaultChecked />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="3" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="4" />
  <input className="join-item btn btn-square" type="radio" name="page" aria-label="5" />
</div>

Paginierung mit Seitensprung

Kombinieren Sie Join, Schaltflächen und eine Auswahl für eine kompakte Paginierungsleiste, mit der Benutzer direkt zu jeder Seite springen können – üblich in Admin-Dashboards, CMS-Schnittstellen und datenintensiven Apps. Für die Auswahl selbst ist kein JavaScript erforderlich. Koppeln Sie es mit HTMX oder einer Formularübermittlung für die serverseitige Navigation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="join">
  <button class="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select class="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option selected>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button class="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div className="join">
  <button className="join-item btn btn-sm" aria-label="Previous page">‹</button>
  <select className="join-item select select-sm" aria-label="Go to page">
    <option>Page 1</option>
    <option>Page 2</option>
    <option>Page 3</option>
    <option>Page 4</option>
    <option>Page 5</option>
  </select>
  <button className="join-item btn btn-sm" aria-label="Next page">›</button>
</div>

Umrissstil

Verwenden Sie btn-outline auf allen Schaltflächen für eine geringere visuelle Gewichtung, die zu sekundären Inhaltsabschnitten und Seitenleisten passt.

1
2
3
4
5
6
7
<div class="join">
  <button class="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button class="join-item btn btn-outline btn-sm">1</button>
  <button class="join-item btn btn-outline btn-sm btn-active">2</button>
  <button class="join-item btn btn-outline btn-sm">3</button>
  <button class="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

1
2
3
4
5
6
7
<div className="join">
  <button className="join-item btn btn-outline btn-sm" aria-label="Previous page">‹</button>
  <button className="join-item btn btn-outline btn-sm">1</button>
  <button className="join-item btn btn-outline btn-sm btn-active">2</button>
  <button className="join-item btn btn-outline btn-sm">3</button>
  <button className="join-item btn btn-outline btn-sm" aria-label="Next page">›</button>
</div>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Pagination-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP