Sideinddeling i Vanilla JavaScript

Introduktion

Når du opretter et websted eller en webapplikation, især hvis de indeholder en masse skabelon indhold (såsom et gitter eller en liste over elementer, der tilhører en kategori) – det er generelt en god idé at opdele det i sider for at reducere antallet af elementer, der vises på skærmen på én gang.

I denne artikel lærer vi, hvordan man implementerer paginering i vores webprojekter ved hjælp af vanilla JavaScript fra bunden.

Til formålet med denne artikel vil vi hente indholdet fra denne eksempel API-svar. Den indeholder 100 datapunkter, men vi bruger kun 30 og viser 6 indlæg på vores skærm ad gangen.

Kom godt i gang

Før vi henter alle påkrævede indlæg fra API'et ved hjælp af browserens indbyggede Fetch API, skal vi først oprette en grundlæggende HTML-markering, som senere bliver dynamisk udfyldt via vores script:

<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-indlæg

Som nævnt før handler paginering om at dele indhold op i mindre bidder. Det kræver, at du henter dataene, beslutter hvornår og hvordan du skal opdele, beregner antallet af sider og derefter viser en del af det til brugeren. Heldigvis - back-end-funktionalitet tager sig normalt af de første par opgaver og returnerer den relevante side, det samlede antal sider og indholdet per side.

Lad os komme i gang ved først at hente alle vores indlæg, og så vil vi senere ændre dette til kun at forespørge nogle få datapunkter pr. 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();

Lad os hurtigt undersøge koden ovenfor. Først og fremmest begyndte vi med at få div element, hvor vi ville vise alt vores indhold via class navn, vi tildelte div. Til sidst skrev vi en funktion til at håndtere hente-operationen.

I fetchPosts() funktionen brugte vi Hent API at hente indlæg fra JSON Placeholder posts API, og gem derefter JSON-dataene, der henvises til af posts variabel og brugte innerHTML egenskab for at tilføje hvert stykke indhold til posts-section ved at gå igennem dem.

På dette tidspunkt har vi hentet alt vores indhold.

Lad os starte med at erklære tre variabler, der er afgørende for implementering af paginering på vores webside. Den første er antal indlæg, vi ønsker at erklære pr. side, så den nuværende sidenummer (1 som standard), og det samlede antal sider.

Til denne guide vil vi give det samlede antal sider et fast antal 30:

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

I det foregående afsnit har vi vist alle indlæg på en enkelt side, men vi ønsker kun at vise seks ad gangen. Derfor har vi indstillet numberPerPage til 6 som vi nu vil bruge til at justere hente-operationen, så den kun vises 6 indlæg.

Det afhænger af den specifikke implementering, men det er udbredt praksis at tillade, at forespørgselsparametre bruges, når du henter resultater fra API'er, som giver dig mulighed for at hente en bestemt side af resultaterne. For eksempel muliggør den mock REST API, som vi bruger page , limit parametre, der lader dig kun indlæse batches, som du vil vise på et givet tidspunkt.

På denne måde indlæser vi kun de data, vi ønsker at vise til brugeren! Vi kan derefter enten forhåndshente den næste side for hurtigere indlæsningstid eller nyde den beregningshastighed, der opnås ved kun at indlæse de data, der skal vises.

Vi vil gøre brug af disse parametre ved at ændre vores hentningsanmodning:

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 ovenstående kode tilføjede vi de to parametre til API-endepunktet, som er pageNumber og antal indlæg pr. side hvilket ville hjælpe os med at dele vores indlæg op på flere sider, og så kan disse indlæg nu vises baseret på sidetallet.

Derudover bestod vi også i pageNumber til fetchPosts() funktion, så vi kan kalde denne funktion, hver gang siden ændres:

Lad os nu tilføje funktionalitet til sidenavigationsknapperne nederst på vores side og få dem til at vise passende indhold baseret på sidenummeret.

Vi vil bemærke, at vi i markeringen havde en sektion, der viste pagineringsknapperne:

<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 vil nu tilføje click begivenheder til hver knap, så når der klikkes på dem, vises indholdet til den pågældende side.

Gennemførelse af Tidligere Button

Logikken her er ret simpel. Alt vi skal gøre er at hente det element, der repræsenterer forrige knap, tilføj click begivenhedslytter til det og vis det relevante indhold, når der klikkes på knappen:

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

Efter tilføjelse af en click begivenhedslytter, har vi tjekket, om det aktuelle sidetal er større end 1 i tilbagekaldsfunktionen. Hvis tallet er lig med eller mindre end 1, vi bliver ved med at vise det aktuelle indhold. Men hvis det aktuelle sidetal er større end 1 vi kan frit nedsætte dens værdi og kalde den fetchPosts(pageNumber) funktion med det nye sidetal indsat som et argument, og viser derfor indholdet af den forrige side.

Gennemførelse af Næste Button

Logikken her er fuldstændig den samme som for tidligere knap, med nogle få mindre ændringer. Selvfølgelig henter vi listeelementet med klassen next i stedet for prev. Vi vil også kontrollere, om det aktuelle sidetal er mindre end antal sider som vi satte os til 30 manuelt tidligere. Til sidst øger vi det aktuelle sidetal i stedet for at formindske det:

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

Konklusion

At opdele indhold i mindre, mere håndterbare bidder, der vises individuelt, er afgørende, når du prøver at vise en database eller en anden datakilde på din webapplikation.

I denne artikel tog vi et kig på, hvordan man implementerer paginering med JavaScript fra bunden, uden nogen eksterne biblioteker og værktøjer.

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://stackabuse.com/pagination-in-vanilla-javascript/