Bootstrap - Pagination (Navigationsblock für Paginierung). Bootstrap - Pagination (Navigationsblock für Paginierung) Anbindung der notwendigen Frameworks

Paginierung, einschließlich Seitennavigation, ist eine ziemlich einfache Sache, aber Anfänger haben oft Probleme, sie zu erstellen und vor allem zu verstehen, wie sie funktioniert ...

Eine der Aufgaben der Paginierung ist die gleichzeitige Anzeige nicht aller Elemente, sondern deren begrenzte Anzahl, sagen wir nicht mehr als $pp Elemente, und welche Gruppe von Elementen angezeigt wird, hängt vom Eingabeparameter $pn ab - der Anzahl dieser Gruppe. Diese Zahl ist eigentlich die Seitenzahl. Hier ist eine Anfrage wie diese:

SELECT * FROM `table` LIMIT (($pn-1)*$pp),($pp)

Der Wert von $pn wird um 1 dekrementiert, sodass beispielsweise für die erste Seite einer Liste mit einem Wert von $pp gleich 10 Elemente von 0 bis 9 ausgewählt werden und nicht von 10 bis 19. Natürlich Wenn die Seiten von Null aus nummeriert sind, den Wert von $ um 1 verringern. pn ist in der Anfrage nicht erforderlich.

Um das nächste Problem zu lösen, nämlich den Aufbau einer Seitennavigation, müssen Sie zunächst die Gesamtzahl der Seiten in der Liste kennen. Dazu können Sie zunächst die Gesamtzahl der Elemente abfragen. Oder berechnen Sie direkt in der Abfrage die Gesamtzahl der Seiten anhand der Gesamtzahl der Elemente:

SELECT FLOOR((COUNT(*)+($pp-1))/($pp)) FROM `table`

Um die Gesamtzahl der Seiten $pc zu erhalten, wird hier die bekannte Formel $pc=(count+per_page-1) div per_page verwendet, jedoch um die Verwendung der FLOOR-Funktion anstelle der Integer-Division (div) angepasst. Sie können auch den seit langem von MySQL unterstützten DIV-Operator verwenden.

Wenn Sie nur ein Element pro Seite anzeigen müssen, können die obigen Abfragen vereinfacht werden.

Nachdem die Gesamtzahl der Seiten $pc empfangen wurde, können Sie sofort Links zu allen Seiten der Liste anzeigen, indem Sie mit einem Zähler im Bereich von 1 bis $pc nur zu Seiten mit Zahlen in einem begrenzten Bereich in Abhängigkeit von der Anzahl der wechseln aktuelle Seite. Hier sind zum Beispiel die Formeln, um die bereichsbegrenzenden Werte von $first und $last für die sogenannte Banknavigation zu erhalten:

$first=$pn-1-($pn-2)%$range; $last=$first+$range<$pc?$first+$range:$pc;

In $range müssen Sie einen Wert 1 kleiner als die erforderliche Bereichsbreite eingeben, um beispielsweise nicht mehr als sieben normale Links zu Seiten anzuzeigen, müssen Sie in $range den Wert 6 eingeben. Wenn Sie alles oben Geschriebene kombinieren, es wird so aussehen:

$pp=10; if ($result=mysqli_query($link,"SELECT FLOOR((COUNT(*)+".($pp-1).")/".$pp.") FROM `table`")) ( list($ pc)=mysqli_fetch_row($result); mysqli_free_result($result); // Rotator für Seitenzahlen 0 und 1 hier platzieren if ($pn==0||$pn>$pc) error(404); elseif ($result =mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$pn-1- ($pn-2)%$range; $last=$first+$range<$pc?$first+$range:$pc; } else error(503); } else error(503);

Es bleibt nur noch die Navigationsleiste anzuzeigen:

In der gezeigten Implementierung ermöglicht Ihnen der erste reguläre Link (sofern es sich nicht um einen Link zur ersten Seite handelt) den Wechsel zur vorherigen Seitenbank. Wenn Sie möchten, dass Sie mit dem letzten regulären Link auch zur nächsten Seitenbank wechseln können (d. h. er funktioniert ähnlich wie der „Mehr“-Link und kann ihn ersetzen), können Sie den Ausdruck ($range-1) in angeben die erste Formel als Divisor anstelle der $range-Variablen.

Die Pagelink-Funktion ist für die Generierung des Teils des Links verantwortlich, der die Seitennummer angibt. Bei Verwendung des Seitenzahl-Rotators 0 und 1 wird diese Funktion am besten neben dem Rotator platziert, weil Es sollte den Effekt des Rotators kompensieren, sodass Sie die Adresse / anstelle von /?p=1 im Link erhalten, um mit dem Nullwert des Eingabeparameters $pn übereinzustimmen:

Funktion pagelink($p) ( return $p>1?"?p=".$p:""; ) if ($pn==0) $pn++; elseif ($pn==1) $pn--;

In diesem Artikel betrachten wir den Prozess der Erstellung eines solchen Webinterface-Elements als Navigationsblock für die Paginierung. In Bootstrap 3 und 4 wird dieses UI-Element mithilfe der Pagination-Komponente implementiert.

Was ist Paginierung?

Paginierung ist eine Paginierung von Daten. Diese. das ist das Fazit wenn Daten ausgegeben werden nicht alles auf einmal, aber Kleinteile (Seiten).

Um durch diese Teile (Seiten) zu navigieren, wird ein Navigationsblock verwendet.

Die Pagination-Komponente des Bootstrap-Frameworks wurde nur entwickelt, um dieses Schnittstellenelement zu erstellen, d.h. Navigationsblock.

Erstellen eines Navigationsblocks für die Paginierung

In Bootstrap 3 hat der Navigationsblock die folgende Struktur:

Das nav-Element in diesem Fragment spielt die Rolle eines Wrapper-Containers. Es wird in dieser Struktur nur damit assistierende Technologien benötigt nahm dieses Stück HTML-Code als Navigation wahr.

Darüber hinaus ist es wünschenswert, dass assistierende Technologien erklären, um welche Art von Navigationsblockierung es sich handelt. Diese Aktion wird über das Attribut aria-label ausgeführt.

Das Navigationsblock-Markup für die Paginierung in Bootstrap erfolgt mit Aufzählungsliste. Jeder Navigationslink in diesem Block ist ein a-Element, das in ein li eingeschlossen und in ein ul platziert wird.

Das visuelle Design des Navigationsfelds in Bootstrap erfolgt mithilfe der Paginierungsklasse, die dem ul hinzugefügt werden muss.

Navigationsblockstruktur in Bootstrap 4:

Beachten Sie, dass in Bootstrap 4 die Elemente li und a die . li ist Seitenelement und a ist Seitenlink . Diese Klassen legen CSS-Stile für die Elemente fest und werden für die korrekte Anzeige des Navigationsblocks benötigt.

Verwenden Sie Symbole oder Symbole anstelle von Textbeschriftungen

Ein Beispiel für eine Navigationsleiste zum Paginieren, die Symbole als Inhalt für einige der Links verwendet:

Status eines Navigationslinks ändern

Das Ändern des Status von Links in der Navigationsleiste erfolgt über die deaktivierten und aktiven Klassen. Die erste Klasse ( disabled ) wird verwendet, um einen inaktiven (nicht anklickbaren) Link zu erstellen. Die zweite Klasse ( aktiv ) wird benötigt, um hervorzuheben (anzugeben) aktuelle Seite. Sie müssen die aktiven und deaktivierten Klassen nicht zum Link selbst, sondern zum li-Element hinzufügen.

Die Klasse disabled setzt die CSS-Linkdeklaration pointer-events: none . Diese Erklärung soll die Funktionalität des Links deaktivieren. Das Umschalten über die Tastatur wird jedoch nicht deaktiviert. Wenn Sie also die Funktionalität solcher Links in Ihrem Projekt vollständig deaktivieren möchten, müssen Sie sie zusätzlich mit JavaScript verfolgen und ihnen das Attribut tabindex="-1" hinzufügen.

Eine andere Möglichkeit, die Link-Funktionalität zu deaktivieren, ist Verwenden Sie Element a nicht.

Größenänderung des Navigationsblocks

In Bootstrap 3 und 4 können Sie die Größe des Navigationsfelds mithilfe der Klassen pagination-lg und pagination-sm ändern. Dies geschieht durch Hinzufügen einer dieser Klassen zur Paginierungsklasse.

Die erste Klasse ( pagination-lg ) wird verwendet, wenn die Größe der Navigation erhöht werden muss, und die zweite ( pagination-sm ) wird verwendet, wenn die Größe der Navigation reduziert werden muss.

Ausrichtung des Navigationsblocks

In Bootstrap 3 ist die Navbar-Ausrichtung für die Paginierung erledigt Textausrichtungsklassen.

In Bootstrap 4 erfolgt die Navbar-Ausrichtung für die Paginierung mithilfe der Flex-Klassen.

Pager-Komponente (Bootstrap 3)

Pager ist eine Bootstrap 3-Komponente, die entwickelt wurde, um eine einfache Navigation durch Seiten oder andere Website-Inhalte zu erstellen. Diese Komponente besteht aus 2 Schaltflächen (Links).

Eine der häufigsten Anwendungen für diese Navigation besteht darin, sie so zu gestalten Die erste Schaltfläche navigierte zu einem neueren Eintrag auf der Website und die zweite zu einem älteren.

Syntax der Pager-Komponente:

Schaltflächenlayout ändern

Standardmäßig Schaltflächen für Pager-Komponenten mittig ausgerichtet. Aber neben dieser Option erlaubt Bootstrap 3 ihnen, sich an verschiedenen Kanten auszurichten. Dies geschieht, indem die Klasse vor der ersten Schaltfläche und neben der zweiten hinzugefügt wird. Die vorherige Klasse richtet den Link links und daneben rechts aus.

Schaltflächenfunktion deaktivieren

Das Umschalten einer Schaltfläche in einen deaktivierten Zustand erfolgt durch Hinzufügen der deaktivierten Klasse zu ihr.

Websites bestehen in der Regel aus mehreren Seiten. Sie können sich als 3-5 Seiten befinden, zum Beispiel auf der Zielseite und vielleicht mehr, viel mehr.

Jede gute Website sollte eine Navigation enthalten, die es dem Benutzer ermöglicht, richtig zu navigieren und sich zwischen den Seiten der Website zu bewegen. Sie können eine solche Paginierung mit JavaScript erstellen. In diesem Artikel werden wir darüber sprechen, wie man eine solche Navigation erstellt.

Ein weiterer Punkt, zusätzlich zu regulärem JavaScript, verwendet das Beispiel Bootstrap 4. Seine Bootstrap-Paginierungskomponente wird mit der JQuery-Bibliothek kombiniert, nämlich dem speziellen Buzina Pagination-Plugin. Es ermöglicht Ihnen, alle Informationen auf mehrere Seiten aufzuteilen und eine Navigation zwischen ihnen zu erstellen.

Verbinden der notwendigen Frameworks

Um mit Bootstrap und JQuery zu arbeiten, müssen Sie sie einschließen. Dies kann in Ihrem HTML-Dokument mithilfe von Tags erfolgen

Wenn Sie jQuery bereits auf Ihrer Website aktiviert haben und es mit Might and Main funktioniert, können Sie alle oben beschriebenen Gesten getrost überspringen. Hauptsache, Sie achten darauf, dass die jQuery-Version nicht zu dicht ist. In WordPress ist das übrigens in Ordnung.
Als nächstes verbinden wir unser Arbeitspferd - das Plugin jquery.simplePagination.js:

Sie können den Garten nicht umzäunen, sondern einfach den gewünschten Stil auswählen, hell, dunkel oder kompakt, und den Regelsatz in die .css-Datei Ihrer Vorlage einfügen. Schreiben Sie Ihre eigenen Stile oder verwenden Sie sie Bootstrap, auch eine Option, in Bezug auf Originalität und Entwicklung von Site-Building-Fähigkeiten, sogar noch vorzuziehen.

Schritt 3 HTML

Um die Paginierungsleiste auf den Seiten der Website anzuzeigen, wo Sie sie platzieren möchten, ist es logischer und meistens befindet sich dies am Ende des Hauptinhalts, Sie sollten Folgendes schreiben:
Für einen hellen Hintergrund:

Kompaktes Thema:

$(function() ( $(#light-pagination).pagination(( items: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

In dem Beispiel habe ich #light-pagination initialization für die Paginierung des hellen Themas verwendet, aber Sie können den Selektor in einen anderen ändern, für kompakt ist es #compact-pagination oder für den dunklen Stil #dark-pagination . Vergessen Sie in diesem Fall nicht, die Klasse in der Funktion zu ändern CSS-Stil.
Wie ich oben schon geschrieben habe, ist das Plugin sehr flexibel in den Einstellungen, folgende Optionen stehen zur Änderung zur Verfügung:

Artikel- Die Gesamtzahl der Elemente, die zur Berechnung der Seiten verwendet werden. Default: 1 .
ArtikelaufSeite- Die Anzahl der auf jeder Seite angezeigten Elemente. Default: 1 .
Seiten- Optional. Wenn ein Wert angegeben ist, werden die Optionen items und itemsOnPage ignoriert. Legt die Anzahl der Seiten in der Liste fest.
angezeigte Seiten- Wie viele Seitenzahlen sollen während der Navigation sichtbar sein. Minimal zulässiger Wert: 3 , Default: 5 .
Kanten— Wie viele Seitenzahlen sind am Anfang und am Ende der Nummerierung sichtbar. Standardwert: 2 .
aktuelle Seite- Welche Seite direkt nach dem Start ausgewählt wird. Logischerweise ist der Standardwert: 1 .
hrefTextPräfix- Die im HREF-Attribut verwendete Zeichenfolge wird vor der Seitenzahl hinzugefügt. Default: "#Buchseite".
hrefTextSuffix- Der im HREF-Attribut verwendete String wird nach der Seitenzahl eingefügt. Der Standardwert ist eine leere Zeichenfolge.
vorherigerText— Schaltflächentext zur vorherigen Seite. Default: "vorher".
nächsteText— Schaltflächentext für die nächste Seite. Default: Nächste
CSS-Stil- CSS-Stil definieren. Default: "Licht-Thema"
selectOnClick- Seitenauswahl nach Anklicken, standardmäßig - aktiviert ( WAHR), ich habe nicht verstanden, warum ich es deaktivieren sollte, aber es gibt eine solche Gelegenheit, der Wert ist „false“.

Wir haben die grundlegendsten Einstellungen abgedeckt. Sie können sich über zusätzliche Funktionen und verfügbare Methoden zur Verwendung dieses Plugins informieren, indem Sie die Dokumentation direkt auf der Entwicklerseite studieren.

Mir bleibt nur noch, Ihnen viel Glück und Erfolg bei der Arbeit an Ihren neuen Projekten zu wünschen.

Sammlung kostenlos HTML- und CSS-Paginierung Codebeispiele: reaktionsschnell, einfach, Materialdesign, Navigationspunkte, usw. Update der Kollektion Juni 2018. 5 neue Artikel.

In Verbindung stehende Artikel

Über den Code

Responsive Paginierung/Pager in HTML und CSS. Ändern Sie die Größe Ihres Browsers, um interessante Effekte zu zeigen.

Antwort: ja

Abhängigkeiten: bootstrap.css

Über den Code

Zeilenfolgen-Paginierung

CSS-Zeile folgen der Paginierung.

Antwort: ja

Abhängigkeiten:-

Über den Code

Paginierungsschaltflächen

Reine CSS-Paginierungsschaltflächen.

Kompatible Browser: Chrome, Firefox, Opera, Safari

Antwort: ja

Abhängigkeiten:-

Über den Code

Zeilenumbruch mit Hover

Reine CSS-Zeilenpaginierung mit Hover-Effekt.

Kompatible Browser: Chrome, Edge, Firefox, Opera, Safari

Antwort: ja

Abhängigkeiten:-

Über den Code

Pacman-Paginierung

Paginierungsanimation mit HTML, CSS und JS.

Kompatible Browser: Chrome, Edge, Firefox, Opera, Safari

Antwort: ja

Abhängigkeiten:-

Über den Code

einfaches CSS.

Über den Code

Rein CSS Pac-Man-Paginierung mit Animation beim Schweben.

Über den Code

Einfache responsive Paginierung.

Über den Code

HTML- und CSS-Paginierung.

Über den Code

Paginierungsbeispiel, mit dem Sie zwischen verschiedenen Seiten navigieren können. Dieses Beispiel müsste href-Attribute haben, um mit einer tatsächlichen Anwendung zu arbeiten, die Paginierung erfordert.