Einfache Paginierung in JavaScript

Webseiten verwenden häufig die Pagination, bei der es darum geht, Inhalte in mehrere Seiten zu zerlegen. Es ermöglicht den Benutzern, durch große Mengen an Inhalten problemlos zu navigieren, sodass es überschaubarer und weniger überwältigender ist. Es verbessert die gesamten Ladezeiten einer Website. Die Paginierung erleichtert Entwicklern auch das Verwalten und Abnehmen von Daten aus Datenbanken, insbesondere wenn es sich um große Datenmengen handelt.

In diesem Beitrag wird das Verfahren beschrieben, um Paginierung in JavaScript zu erstellen.

So erstellen Sie eine einfache Pagination in JavaScript?

Die JavaScript -Paginationsidee verwendet die “Nächste" Und "VorherigeSchaltflächen oder Links, um zwischen Seiten zu navigieren. Das grundlegende Ziel der Pagination ist es, dass Benutzer schnell durch Inhalte navigieren können, indem Sie auf Links oder Schaltflächen klicken.

Schauen wir uns das Beispiel an, um den Prozess des Erstellens einfacher Pagination in JavaScript zu verstehen. Es wird drei Schritte dauern.

Schritt 1: Fügen Sie den Inhalt in der HTML -Datei hinzu
Erstellen Sie zunächst den Inhalt, der auf der Webseite angezeigt werden soll. Hier erstellen wir eine bestellte Liste mit einem HTML “olTag, in dem die Listen der Programmiersprachen, Früchte, Zählungen und der Wochentage gespeichert sind. Alle diese Listen werden auf verschiedenen Seiten unter Verwendung einer Paginationstechnik gedruckt:

1. Html


2. CSS


3. JavaScript


4. Knoten JS


5. Java


6. C++


7. C#


8. Python


9. Sql


10. Visual Basic


11. Apfel


12. Banane


13. Trauben


14. Orange


15. Kirsche


16. Birne


17. Mango


18. Erdbeere


19. Wassermelone


20. Granatapfel


21. Eins


22. Zwei


23. Drei


24. Vier


25. Fünf


26. Sechs


27. Sieben


28. Acht


29. Neun


30. Zehn


31. Montag


32. Dienstag


33. Mittwoch


34. Donnerstag


35. Freitag


36. Samstag


37. Sonntag

Schritt 2: Stylen Sie den Inhalt und die Schaltflächen mit CSS
Stylen Sie dann den Inhalt, die Schaltflächen und die Aktionen, die von Schaltflächen ausgeführt werden, z. B. die Farbe auf dem Schwebedruck usw. ändern.

Die CSS -Klasse zum Styling der “nächste”(>) Und“vorherige”(<) buttons are as follows:

.Seitennummerierung
Breite: Calc (100% - 2REM);
Anzeige: Flex;
Ausrichtung: Zentrum;
Position: absolut;
unten: 0;
Polsterung: 1REM 0;
Justify-Content: Center;

Zum Styling der dynamischen Tasten “1, 2, 3… ”, Verwenden Sie den folgenden CSS -Code:

.Pagination-Number,
.Seiten-Buttons
Schriftgröße: 1.1rem;
Hintergrundfarbe: hellblau;
Grenze: Keine;
Rand: 0.25rem 0.25rem;
Cursor: Zeiger;
Höhe: 2.5rem;
Breite: 2.5rem;
Grenzradius: .2rem;

Verwenden Sie die angegebene Klasse, um die Farbe auf dem Schweber der Schaltflächen zu ändern:

.Pagination-Number: Schwebe,
.Seiten-Buttons: nicht (.deaktiviert): Hover
Hintergrund: Lichtblau;

Setzen Sie für die aktiven Schaltflächen die verschiedenen Farben der Taste mit den folgenden CSS -Eigenschaften ein:

.Pagination-Number.aktiv
Farbe: #fff;
Hintergrund: #0c313f;

Diese CSS -Klasse wird zum Styling der Liste verwendet, die auf der Webseite angezeigt wird:

.olstyle
Anzeige: Inline-Block;
Text-Align: links;

Wenn Sie eine Schaltfläche oder Inhalte ausblenden müssen, verwenden Sie die folgende CSS -Klasse:

.versteckt
Anzeige: Keine;

Schritt 3: Erstellen Sie eine einfache Paginierung mit JavaScript
Verwenden Sie nun in der JavaScript -Datei den folgenden Code, um einen Container für die Pagination zu erstellen:

<

>

Im folgenden Snippet:

• Erstellen Sie zunächst einen Container für die Paginationstasten mit der “div"Element und zuweisen Sie eine CSS -Klasse"Seitennummerierung”Zum Styling der Knöpfe.
• Erstellen Sie zwei Tasten (“Nächste" Und "Vorherige”) Als Pfeiltasten mit der“& lt" Und "& gt”.
• Erstellen Sie eine DIV für die dynamischen Schaltflächen basierend auf der Inhaltsverteilung.

Hier deklarieren wir einige Variablen, um den Paginationsinhalt festzulegen:

const paginationlimit = 10;
const pagecount = math.Ceil (ListItems.Länge / PaginationLimit);
Sei CurrentPage = 1;

• Teilen Sie zunächst die Daten oder Inhalte in Seiten ein. Sie können dies tun, indem Sie die Anzahl der Elemente pro Seite begrenzen. Hier setzen wir die Grenze der Seite auf „10“, was bedeutet, dass auf jeder Seite nur 10 Elemente angezeigt werden.
• Teilen Sie die Gesamtzahl der Elemente “ListItems.Länge" bis zum "PaginationLimit"Und runden Sie die höchste ganze Zahl unter Verwendung der"Mathematik.Ceil ()Methode, um die PageCount zu erhalten.
• Legen Sie die aktuelle Seite als "fest1”.

Erstellen Sie nun eine Variable, die die Referenzen der Seitenzahlen, Schaltflächen und Inhaltsliste mit ihren zugewiesenen IDs erhalten:

const paginationNumbers = Dokument.getElementById ("Seitenzahlen");
const NextButton = Dokument.GetElementById ("Next-Button");
const prevbutton = Dokument.GetElementById ("Prev-Button");
const PaginedList = Dokument.GetElementById ("Liste");
const ListItems = Paginierte Liste.QuerySelectorAll ("li");

Definieren Sie eine Funktion zum Deaktivieren der Schaltfläche, wenn sich die Liste am Start oder am Ende befindet. Dies bedeutet, das zu deaktivieren “Weiter (>)Schaltfläche Wenn die letzte Seite in ähnlicher Weise geöffnet wird, deaktiviert man die “vorherige (<)Schaltfläche "Schaltfläche Wenn die erste Seite geöffnet wird:

const disableButton = (button) =>
Taste.Klasse.add ("deaktiviert");
Taste.setAttribute ("deaktiviert", true);
;

Verwenden Sie auch die folgende Funktion, um die Taste zu deaktivieren, um die Paginationsschaltflächen zu aktivieren:

const enableButton = (button) =>
Taste.Klasse.entfernen ("deaktiviert");
Taste.removeTtribute ("deaktiviert");
;

Hier verarbeiten wir den Status der Seitenschaltflächen, wenn sie aktiviert sind oder wenn sie deaktiviert sind:

const handle PageButtonsStatus = () =>
if (currentPage === 1)
deaktivierenButton (Prevbutton);
anders
EnableButton (Prevbutton);

if (pageCount === currentPage)
deaktivierenButton (Nextbutton);
anders
EnableButton (Nextbutton);

;

Erstellen Sie dynamische Schaltflächen entsprechend der Länge des Inhalts und fügen Sie sie in einen Paginierungsbehälter hinzu:

const appendPagenumber = (index) =>
const pagenumber = dokument.CreateLement ("Schaltfläche");
Seitennummer.className = "pagination-number";
Seitennummer.Innerhtml = Index;
Seitennummer.setAttribute ("Seite-Index", Index);
PaginationNumbers.appendChild (Pagenumber);
;
const getPaginationNumbers = () =>
für (sei i = 1; i
dokumentieren.QuerySelectorall (".Pagination-Number ").foreach ((Taste) =>
Taste.Klasse.entfernen ("aktiv");
const pageIndex = number (Schaltfläche.getAttribute ("Seite-Index"));
if (pageIndex == currentPage)
Taste.Klasse.add ("aktiv");

);
;

Fügen Sie den oben genannten Code der angegebenen Funktion hinzu, damit jedes Mal eine neue Seite festgelegt wird, wird die aktive Seitennummer aktualisiert:

const setCurrentPage = (pagenum) =>
currentPage = pagenum;
Handleaktivepagenumber ();
HandleButtonsStatus ();
const prevrange = (pagenum - 1) * paginationLimit;
const salrange = pagenum * paginationLimit;
ListItems.foreach ((item, index) =>
Artikel.Klasse.add ("versteckt");
if (index> = prevrange && index < currRange)
Artikel.Klasse.entfernen ("versteckt");

);
;

Wenn die Schaltfläche "Seitennummer klickt", klicken Sie mit dem Listener des Ereignislisteners, um das aufzurufensetCurrentPage”Funktion. Um auf die vorherige Schaltfläche zu klicken, verschieben Sie die vorherige Seite, indem Sie die “abziehen“1" von dem "aktuelle SeiteUnd zum Klicken auf die nächste Schaltfläche wechseln Sie zur nächsten Seite, indem Sie hinzugefügt werden1" im aktuelle Seite”:

Fenster.AddEventListener ("Load", () =>
GetpaginationNumbers ();
setCurrentPage (1);
Prävbutton.AddEventListener ("Click", () =>
setCurrentPage (currentPage - 1);
);
nächster Knopf.AddEventListener ("Click", () =>
setCurrentPage (currentPage + 1);
);
dokumentieren.QuerySelectorall (".Pagination-Number ").foreach ((Taste) =>
const pageIndex = number (Schaltfläche.getAttribute ("Seite-Index"));
if (pageIndex)
Taste.AddEventListener ("Click", () =>
setCurrentPage (PageIndex);
);

);
);

Ausgang

Hier geht es um die Paginierung in JavaScript.

Abschluss

Erstellen Sie zunächst einen Container für das Paginationselement und die Liste der zu paginierten Elemente, um eine einfache Pagination in JavaScript zu erstellen. Teilen Sie die Liste der Elemente in kleinere Gruppen ein oder “Seiten”, Basierend auf der gewünschten Anzahl von Elementen pro Seite. Erstellen Sie Schaltflächen oder Links, um zwischen den Seiten zu navigieren, und fügen Sie sie zum Paginierungsbehälter hinzu. Fügen Sie den Schaltflächen Ereignishörer hinzu, um die angezeigten Elemente beim Klicken zu aktualisieren. Verwenden Sie JavaScript, um die Elemente auszublenden, die sich nicht auf der aktuell angezeigten Seite befinden, und um die Elemente anzuzeigen, die sind. Stylen Sie das Paginationselement und die Schaltflächen wie gewünscht. In diesem Beitrag wurde das Verfahren zur Erstellung von Paginierung in JavaScript beschrieben.