Paginering i Vanilla JavaScript

Beskrivning

När du skapar en webbplats eller webbapplikation, särskilt om de innehåller många mall innehåll (som ett rutnät eller en lista över objekt som tillhör en kategori) – det är i allmänhet en bra idé att dela upp det i sidor för att minska antalet objekt som visas på skärmen samtidigt.

I den här artikeln kommer vi att lära oss hur man implementerar paginering i våra webbprojekt med vanilj JavaScript från grunden.

För syftet med den här artikeln kommer vi att hämta innehållet från detta exempel på API-svar. Den innehåller 100 datapunkter, men vi använder bara 30 och visar 6 inlägg på vår skärm åt gången.

Komma igång

Innan vi hämtar alla nödvändiga inlägg från API:t med webbläsarens inbyggda Fetch API, måste vi först skapa en grundläggande HTML-uppmärkning som kommer att fyllas dynamiskt via vårt skript senare:

<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>

Hämtar REST API-inlägg

Som nämnts tidigare handlar paginering om att dela upp innehåll i mindre bitar. Det kräver att du hämtar data, bestämmer när och hur du ska dela, beräkna antalet sidor och sedan visa en del av den för användaren. Tack och lov – back-end-funktionalitet tar vanligtvis hand om de första uppgifterna och returnerar den relevanta sidan, totalt antal sidor och innehållet per sida.

Låt oss komma igång genom att först hämta alla våra inlägg och sedan ändra detta så att det bara söks efter några få datapunkter per sida:

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();

Låt oss snabbt undersöka koden ovan. Först och främst började vi med att skaffa div element där vi skulle visa allt vårt innehåll via class namn vi tilldelat div. Slutligen skrev vi en funktion för att hantera hämtningsoperationen.

I fetchPosts() funktionen använde vi Fetch API för att hämta inlägg från JSON Placeholder posts API, lagra sedan JSON-data som refereras av posts variabel och använde innerHTML egendom för att lägga till varje del av innehållet i posts-section genom att gå igenom dem.

Vid det här laget har vi lyckats hämta allt vårt innehåll.

Låt oss börja med att deklarera tre variabler som är avgörande för att implementera paginering på vår webbsida. Den första är antal inlägg vi vill deklarera per sida, sedan aktuellt sidnummer (1 som standard), och totalt antal sidor.

För denna guide kommer vi att ge totalt antal sidor ett fast antal 30:

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

I föregående avsnitt har vi visat alla inlägg på en enda sida, men vi vill bara visa sex åt gången. Därför har vi ställt in numberPerPage till 6 som vi nu kommer att använda för att justera hämtningsoperationen så att den bara visas 6 inlägg.

Det beror på den specifika implementeringen, men det är utbredd praxis att tillåta att frågeparametrar används när du hämtar resultat från API:er som låter dig hämta en viss sida av resultaten. Till exempel tillåter det mock REST API som vi använder för page och limit parametrar som låter dig bara ladda batcher som du kommer att visa vid en given tidpunkt.

På så sätt laddar vi bara in den data vi vill visa för användaren! Vi kan sedan antingen förhämta nästa sida för snabbare laddningstid, eller njuta av den beräkningshastighet som uppnås genom att bara ladda data som ska visas.

Vi kommer att använda dessa parametrar genom att ändra vår hämtningsförfrågan:

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 ovanstående kod lade vi till de två parametrarna till API-slutpunkten som är pageNumber och antal inlägg per sida vilket skulle hjälpa oss att dela upp våra inlägg på flera sidor och sedan kan dessa inlägg nu visas baserat på sidnumret.

Dessutom passerade vi också i pageNumber till fetchPosts() funktion så att vi kan anropa den här funktionen när sidan ändras:

Låt oss nu lägga till funktionalitet till sidnavigeringsknapparna längst ner på vår sida och låta dem visa lämpligt innehåll baserat på sidnumret.

Vi kommer att märka att vi i markeringen hade en sektion som visar sidnumreringsknapparna:

<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 ska nu lägga till click händelser till varje knapp så att när de klickas visas innehållet som är avsett för den sidan.

Genomförande av föregående Knappen

Logiken här är ganska enkel. Allt vi behöver göra är att hämta elementet som representerar föregående knapp, Lägg till click händelseavlyssnare till den och visa lämpligt innehåll när knappen klickas:

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

Efter att ha lagt till en click händelseavlyssnare, vi har kontrollerat om det aktuella sidnumret är större än 1 i återuppringningsfunktionen. Om antalet är lika med eller mindre än 1, vi fortsätter bara att visa det aktuella innehållet. Men om det aktuella sidnumret är större än 1 vi kan fritt sänka dess värde och ringa till fetchPosts(pageNumber) funktion med det nya sidnumret som ett argument, och visar därför innehållet på föregående sida.

Genomförande av Nästa Knappen

Logiken här är helt densamma som för föregående knapp, med bara några mindre ändringar. Naturligtvis hämtar vi listelementet med klassen next istället för prev. Vi kommer också att kontrollera om det aktuella sidnumret är mindre än antal sidor som vi ställde till 30 manuellt tidigare. I slutändan kommer vi att öka det aktuella sidnumret istället för att minska det:

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

Slutsats

Att dela upp innehåll i mindre, mer hanterbara bitar som visas individuellt är avgörande när du försöker visa en databas eller någon annan datakälla i din webbapplikation.

I den här artikeln tittade vi på hur man implementerar paginering med JavaScript från grunden, utan några externa bibliotek och verktyg.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://stackabuse.com/pagination-in-vanilla-javascript/