Enkel paginering i JavaScript

Nettsider bruker ofte paginering, som er prosessen med å dele innhold på flere sider. Det lar brukere enkelt navigere gjennom store mengder innhold, noe som gjør det mer håndterbart og mindre overveldende. Det forbedrer de samlede lastetidene på et nettsted. Paginering gjør det også lettere for utviklere å administrere og hente data fra databaser, spesielt når de arbeider med store datamengder.

Dette innlegget vil beskrive prosedyren for å lage paginering i JavaScript.

Hvordan lage en enkel paginering i JavaScript?

Javascript -pagineringsidéen bruker “NESTE”Og“Tidligere”Knapper eller lenker for å navigere mellom sider. Det grunnleggende målet med paginering er å tillate brukere å raskt navigere gjennom innhold ved å klikke på lenker eller knapper.

La oss se på eksemplet for å forstå prosessen med å lage enkel paginering i JavaScript. Det vil ta tre trinn.

Trinn 1: Legg til innholdet i HTML -fil
Først må du lage innholdet som vil vises på websiden. Her oppretter vi en bestilt liste ved hjelp av en HTML “ol”Tag som lagrer listene over programmeringsspråk, frukt, telling og ukens dager. Alle disse listene vil bli skrevet ut på forskjellige sider ved hjelp av pagineringsteknikk:

1. Html


2. CSS


3. JavaScript


4. Node JS


5. Java


6. C++


7. C#


8. Python


9. SQL


10. Visual Basic


11. eple


12. Banan


13. Druer


14. oransje


15. kirsebær


16. Pære


17. Mango


18. Jordbær


19. Vannmelon


20. Granateple


21. En


22. To


23. Tre


24. Fire


25. Fem


26. Seks


27. Syv


28. Åtte


29. Ni


30. Ti


31. mandag


32. tirsdag


33. onsdag


34. Torsdag


35. fredag


36. lørdag


37. søndag

Trinn 2: Style innholdet og knappene ved hjelp av CSS
Stil deretter innholdet, knappene og handlingene utført av knapper, for eksempel endre farge på svevet og så videre.

CSS -klassen for styling av “NESTE”(>) Og“tidligere”(<) buttons are as follows:

.paginering
Bredde: Calc (100% - 2REM);
Display: Flex;
Align-elementer: sentrum;
Posisjon: Absolutt;
Bunn: 0;
Polstring: 1REM 0;
Justify-Content: Center;

For styling av de dynamiske knappene “1, 2, 3 .. ”, Bruk følgende CSS -kode:

.Pagineringsnummer,
.Page-Buttons
Fontstørrelse: 1.1REM;
bakgrunnsfarge: Lightblue;
Grense: Ingen;
Margin: 0.25REM 0.25REM;
Markør: peker;
Høyde: 2.5REM;
Bredde: 2.5REM;
Border-Radius: .2rem;

For å endre fargen på svingen på knappene, bruk den gitte klassen:

.Pagineringsnummer: Hopp,
.Side-knapper: ikke (.deaktivert): Hopp
Bakgrunn: Lightblue;

For de aktive knappene, sett de forskjellige fargene på knappen ved å bruke CSS -egenskapene nedenfor:

.Pagineringsnummer.aktiv
Farge: #FFF;
Bakgrunn: #0C313F;

Denne CSS -klassen brukes til å style listen for å vises på websiden:

.olstyle
Display: Inline-block;
Tekstalign: Venstre;

Når det er behov for å skjule hvilken som helst knapp eller innhold, bruk CSS -klassen nedenfor:

.skjult
Display: Ingen;

Trinn 3: Lag enkel paginering ved hjelp av JavaScript
I JavaScript -filen, bruk følgende kode til å opprette en beholder for paginering:

<

>

I det følgende ovennevnte utdrag:

• Først må du lage en beholder for pagineringsknappene ved å bruke “div”Element og tilordne en CSS -klasse”paginering”For styling av knappene.
• Lag to knapper (“NESTE”Og“Tidligere”) Som pilknapper ved å bruke“& lt”Og“& gt”.
• Lag en div for de dynamiske knappene basert på innholdsfordelingen.

Her erklærer vi noen variabler for å sette pagineringsinnholdet:

const paginationLimit = 10;
const pagecount = matematikk.Ceil (ListItems.lengde / paginationlimit);
La CurrentPage = 1;

• Først må du dele dataene eller innholdet i sider. Du kan gjøre dette ved å begrense antall elementer per side. Her setter vi sidens grense til “10”, noe som betyr at bare 10 elementer vil vises på hver side.
• Del det totale antallet varer “ListItems.lengde" ved "PaginationLimit”Og runde til det høyeste hele antallet ved å bruke“Matte.Ceil ()”Metode for å få PageCount.
• Angi den gjeldende siden som "1”.

Lag nå en variabel som får referanser til sidetall, knapper og innholdsliste ved å bruke deres tildelte ID -er:

const paginationNumbers = dokument.getElementById ("Page-numbers");
const NextButton = Dokument.getElementById ("Next-Button");
const prevButton = dokument.getElementById ("Prev-Button");
const paginatedList = dokument.getElementById ("liste");
const listItems = paginatedlist.QuerySelectorAll ("Li");

Definer en funksjon for å deaktivere knappen når listen er i starten eller slutten. Dette betyr å deaktivere “Neste (>)”-Knappen når den siste siden åpnes på samme måte, deaktiverer“Forrige (<)”Knapp når den første siden åpnes:

const DisableButton = (knapp) =>
knapp.Klasseliste.Legg til ("deaktivert");
knapp.setAttribute ("deaktivert", sant);
;

På samme måte å deaktivere knappen, for å aktivere pagineringsknappene, bruk funksjonen nedenfor:

const enableButton = (knapp) =>
knapp.Klasseliste.fjerne ("deaktivert");
knapp.removeAttribute ("deaktivert");
;

Her vil vi håndtere statusen til sideknappene, når de blir aktivert eller når de er deaktivert:

const HandlePageButtonStatus = () =>
if (currentPage === 1)
DisableButton (PrevButton);
annet
EnableButton (PrevButton);

if (pagecount === currentPage)
DisableButton (NextButton);
annet
EnableButton (NextButton);

;

Lag dynamiske knapper i henhold til innholdets lengde, og legg dem til en paginasjonsbeholder:

const appendPagenumber = (indeks) =>
const pagenumber = dokument.createElement ("knapp");
side nummer.ClassName = "Pagination-Number";
side nummer.indreHTML = indeks;
side nummer.setAttribute ("side-indeks", indeks);
PaginationNumbers.appendchild (pagenumber);
;
const getPaginationNumbers = () =>
for (la i = 1; i
dokument.QuerySelectorAll (".pagineringsnummer ").foreach ((knapp) =>
knapp.Klasseliste.fjerne ("aktiv");
const pageIndex = nummer (knapp.getAttribute ("side-indeks"));
if (pageIndex == currentPage)
knapp.Klasseliste.Legg til ("aktiv");

);
;

Legg til koden ovenfor i den gitte funksjonen slik at hver gang en ny side er satt, oppdateres det aktive sidetallet:

const setCurrentPage = (pagenum) =>
CurrentPage = Pagenum;
HandleactivePagenumber ();
HandlePageButtonStatus ();
const prevrange = (pagenum - 1) * paginationLimit;
const currange = pagenum * paginationLimit;
ListItems.foreach ((element, indeks) =>
punkt.Klasseliste.Legg til ("skjult");
if (index> = prevrange && index < currRange)
punkt.Klasseliste.fjerne ("skjult");

);
;

Når sidetallknappen er klikket, bruk klikkhendelseslytteren, for å ringe "setcurrentPage”Funksjon. For å klikke på forrige knapp, flytt forrige side ved å trekke fra "1" fra "nåværende side”, Og for å klikke på neste knapp, gå til neste side ved å legge til“1”I nåværende side”:

vindu.AddEventListener ("Last", () =>
getPaginationNumbers ();
setcurrentPage (1);
PREVBUTTON.AddEventListener ("Klikk", () =>
setCurrentPage (CurrentPage - 1);
);
NextButton.AddEventListener ("Klikk", () =>
setCurrentPage (CurrentPage + 1);
);
dokument.QuerySelectorAll (".pagineringsnummer ").foreach ((knapp) =>
const pageIndex = nummer (knapp.getAttribute ("side-indeks"));
if (pageIndex)
knapp.AddEventListener ("Klikk", () =>
setCurrentPage (PageIndex);
);

);
);

Produksjon

Det handler om paginasjonen i JavaScript.

Konklusjon

For å lage enkel paginering i JavaScript, lag først en beholder for pagineringselementet og listen over elementer som skal pagineres. Del listen over elementer i mindre grupper, eller "Sider”, Basert på ønsket antall elementer per side. Lag knapper eller lenker for å navigere mellom sidene og legge dem til paginasjonsbeholderen. Legg til hendelseslyttere i knappene for å oppdatere de viste elementene når du klikker. Bruk JavaScript for å skjule elementene som ikke er på siden for øyeblikket, og for å vise elementene som er. Stil pagineringselementet og knappene etter ønske. Dette innlegget beskrev prosedyren for å lage paginering i JavaScript.