Paginering i Vanilla JavaScript

Introduksjon

Når du oppretter en nettside eller nettapplikasjon, spesielt hvis de inneholder mange malet innhold (som et rutenett eller en liste over elementer som tilhører en kategori) – det er generelt en god idé å dele den opp i sider for å redusere antall elementer som vises på skjermen samtidig.

I denne artikkelen vil vi lære hvordan du implementerer paginering i nettprosjektene våre ved å bruke vanilla JavaScript fra grunnen av.

For formålet med denne artikkelen vil vi hente innholdet fra denne eksempel API-svar. Den inneholder 100 datapunkter, men vi bruker bare 30 og viser 6 innlegg på skjermen om gangen.

Komme i gang

Før vi henter alle nødvendige innlegg fra API-en ved hjelp av nettleserens innebygde Fetch API, må vi først lage en grunnleggende HTML-markering som vil fylles dynamisk ut via skriptet vårt senere:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Henter REST API-innlegg

Som nevnt før handler paginering om å dele opp innhold i mindre biter. Det krever at du henter dataene, bestemmer når og hvordan du skal dele opp, beregner antall sider og så viser en del av dem til brukeren. Heldigvis – back-end-funksjonalitet tar seg vanligvis av de første oppgavene, og returnerer den relevante siden, totalt antall sider og innholdet per side.

La oss komme i gang ved først å hente alle innleggene våre, og senere vil vi endre dette slik at det bare spørres etter noen få datapunkter per side:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

La oss raskt undersøke koden ovenfor. Først av alt begynte vi med å skaffe div element der vi ville vise alt innholdet vårt via class navn vi tildelte div. Til slutt skrev vi en funksjon for å håndtere henteoperasjonen.

på fetchPosts() funksjonen brukte vi Hent API for å hente innlegg fra JSON Placeholder posts API, og lagre deretter JSON-dataene referert til av posts variabel og brukte innerHTML egenskapen for å legge til hver del av innholdet i posts-section ved å gå gjennom dem.

På dette tidspunktet har vi hentet alt innholdet vårt.

La oss begynne med å erklære tre variabler som er avgjørende for å implementere paginering på nettsiden vår. Den første er antall innlegg vi ønsker å deklarere per side, og så gjeldende sidenummer (1 som standard), og totalt antall sider.

For denne veiledningen vil vi gi totalt antall sider et fast antall 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

I forrige seksjon har vi vist alle innlegg på en enkelt side, men vi vil bare vise seks om gangen. Derfor har vi satt numberPerPage til 6 som vi nå skal bruke til å justere henteoperasjonen slik at den bare vises 6 innlegg.

Det avhenger av den spesifikke implementeringen, men det er utbredt praksis å tillate at søkeparametere brukes når du henter resultater fra APIer, som lar deg hente en viss side av resultatene. For eksempel tillater den falske REST APIen som vi bruker page og limit parametere som lar deg bare laste inn batcher som du vil vise på et gitt tidspunkt.

På denne måten laster vi kun inn dataene vi ønsker å vise til brukeren! Vi kan da enten forhåndshente neste side for raskere lastetid, eller glede oss over beregningshastigheten som oppnås ved kun å laste inn dataene som skal vises.

Vi vil bruke disse parameterne ved å endre henteforespørselen vår:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

I koden ovenfor la vi til de to parameterne til API-endepunktet som er pageNumber og antall innlegg per side som ville hjelpe oss å dele opp innleggene våre på flere sider, og så kan disse innleggene nå vises basert på sidetallet.

I tillegg passerte vi også i pageNumber til fetchPosts() funksjon slik at vi kan kalle denne funksjonen hver gang siden endres:

La oss nå legge til funksjonalitet til sidenavigasjonsknappene nederst på siden vår og få dem til å vise passende innhold basert på sidetallet.

Vi vil legge merke til at i markeringen hadde vi en seksjon som viser pagineringsknappene:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Vi skal nå legge til click hendelser til hver knapp, slik at når de klikkes, vises innholdet beregnet på den siden.

Implementering av Tidligere Button

Logikken her er ganske enkel. Alt vi trenger å gjøre er å hente elementet som representerer forrige knapp, Legg til click hendelseslytter til den og vis det riktige innholdet når knappen klikkes:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Etter å ha lagt til en click hendelseslytter, har vi sjekket om gjeldende sidetall er større enn 1 i tilbakeringingsfunksjonen. Hvis tallet er lik eller mindre enn 1, vi vil bare fortsette å vise gjeldende innhold. Men hvis gjeldende sidetall er større enn 1 vi kan fritt redusere verdien og kalle den fetchPosts(pageNumber) funksjon med det nye sidenummeret som et argument, og viser derfor innholdet på forrige side.

Implementering av neste Button

Logikken her er helt den samme som for forrige knappen, med bare noen få mindre endringer. Selvfølgelig henter vi listeelementet med klassen next istedenfor prev. Vi vil også sjekke om gjeldende sidenummer er mindre enn Antall sider som vi satte til 30 manuelt tidligere. Til slutt vil vi øke det gjeldende sidetallet i stedet for å redusere det:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

konklusjonen

Å dele opp innhold i mindre, mer håndterbare biter som vises individuelt er avgjørende når du prøver å vise en database eller en annen datakilde på nettapplikasjonen din.

I denne artikkelen tok vi en titt på hvordan du implementerer paginering med JavaScript fra bunnen av, uten eksterne biblioteker og verktøy.

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://stackabuse.com/pagination-in-vanilla-javascript/