Webbapplikationer hanterar stora mängder data. Till exempel visar e-handelsapplikationer miljarder data på ett sätt som är både organiserat och visuellt tilltalande. I huvudsak måste data presenteras på ett sätt som är lätt för användare att förstå och navigera.

Men att återge all data på en enda sida kan leda till prestandaproblem, långsammare laddningstider och dåliga användarupplevelser. Av denna anledning kan implementering av pagineringslogik avsevärt lindra dessa problem.

I React kan du välja att använda förbyggda komponenter som tillhandahålls av pagineringsbibliotek, alternativt kan du bygga ett anpassat pagineringssystem med hjälp av React-krokar.

Implementera paginering på klientsidan

Det finns två sätt att implementera paginering i applikationer: paginering på klientsidan och serversidan. Icke desto mindre, oavsett vilket format du väljer, förblir det underliggande konceptet detsamma. Paginering på klientsidan innebär att man hanterar pagineringslogiken på klientsidan, i användarens webbläsare.

Du kan implementera paginering på klientsidan med olika tekniker. Dessa tekniker inkluderar:

1. Sidbaserad paginering: Den här metoden innebär att data delas upp i bitar eller sidor med fast storlek, vilket vanligtvis visar ett visst antal objekt per sida. Användare kan navigera genom sidorna med hjälp av navigeringslänkar eller knappar, märkta med sidnummer eller föregående och nästa knappar. Detta är en populär implementering med sökmotorer och e-handelsapplikationer.
2. Oändlig Scroll: Den här metoden innebär att dynamiskt laddar och renderar ny data när användaren rullar ner på sidan, vilket skapar en sömlös och kontinuerlig surfupplevelse. Den här tekniken är särskilt användbar när man hanterar stora datamängder som kontinuerligt expanderar, till exempel flöden för sociala medier.

Implementera sidbaserad paginering med hjälp av React Hooks

För att komma igång, skapa ett React-projekt. Du kan antingen använda create-react-app JavaScript-kommando för att konfigurera en grundläggande React-applokalt eller använda Vite för att bygga ett React-projekt på din maskin.

Denna handledning har använt Vite, du kan hitta detta projekts kod i denna GitHub-förråd.

Efter att ha ställt in ditt React-projekt, låt oss fortsätta med att implementera sidbaserad paginering med hjälp av React Hooks.

Konfigurera datamängden

Helst skulle du vanligtvis hämta och visa data från en databas. Men för den här handledningen kommer du att hämta data från en dummy JSONPlaceholder API istället.

I den src katalog, skapa en ny komponenter/paginering fil och lägg till följande kod.

1. Skapa en funktionell React-komponent och definiera följande tillstånd.

   importera Reagera, { useEffect, useState } från"reagera";
   importera"./style.component.css";
   fungeraPaginering() {
   konst [data, setData] = useState([]);
   konst [currentPage, setcurrentPage] = useState(1);
   konst [itemsPerPage, setitemsPerPage] = useState(5);
   konst [pageNumberLimit, setpageNumberLimit] = useState(5);
   konst [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   konst [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   lämna tillbaka (
    <>
   
    Pagineringskomponent</h1> 
   >
   
    </>
    );
   }
   exporterastandard Paginering;

2. Implementera logiken för att hämta data från dummy API. Inuti Paginering komponent, lägg till nedan.

    useEffect(() => {
    hämta(" https://jsonplaceholder.typicode.com/todos")
    .sedan((svar) => response.json())
    .sedan((json) => setData (json));
    }, []);
   konst displayData = (data) => {
   lämna tillbaka (
   
   
    {data.length > 0 &&
    data.map((göra, indexera) => {
   lämna tillbaka<linyckel={index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Koden ovan tjänar två huvudsakliga syften. Först, när komponenten har monterats, useEffect hook triggers för att hämta data från den externa API-ändpunkten som sedan konverteras till JSON-format. Den resulterande JSON-datan används sedan för att uppdatera data tillståndsvariabel med hämtade uppgifter. För det andra visa data funktionen tar hämtad data som ett argument och återger data som en oordnad lista över att göra.
3. I retursegmentet av Paginering komponent, inkludera visa data funktion för att återge hämtad data i webbläsaren. Här är en uppdaterad version av koden:

   lämna tillbaka (
    <>
    Pagineringskomponent</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Genom att ringa displayData (data) inom JSX-elementet och passerar data tillståndsvariabel som en parameter, kommer funktionen sedan att återge hämtad data som en oordnad lista i webbläsaren.

I detta speciella fall består den återgivna listan av tvåhundra att göra. Men i verkliga scenarier kommer applikationer att hantera stora mängder data. Att visa alla dessa data på en enda webbsida kan resultera i prestandaproblem, såsom långsamma laddningstider och generellt dålig applikationsprestanda.

För att komma till rätta med detta skulle det vara lämpligt att inkludera sidnumreringsfunktioner för att säkerställa att varje sida innehåller ett begränsat antal objekt som användare kan komma åt separat genom att använda navigeringsknapparna.

Detta tillvägagångssätt tillåter användare att navigera genom data på ett mer hanterbart och organiserat sätt, vilket förbättrar applikationens övergripande prestanda och användarupplevelse.

Implementera pagineringslogik för att visa ett begränsat antal objekt per sida

För att avgöra vilka att-göra-objekt som ska renderas på varje sida måste vi implementera den nödvändiga logiken. Innan du fortsätter är det dock viktigt att fastställa det totala antalet sidor som krävs baserat på tillgängliga att göra-objekt.

För att uppnå detta kan du lägga till följande kod till Paginering komponent:

konst sidor = [];
för (låta jag = 1; jag <= Matematik.ceil (data.length / itemsPerPage); i++) {
 pages.push (i);
 }

Kodavsnittet ovan, itererar genom data array, beräknar det totala antalet sidor som behövs genom att dividera längden på data array efter önskat antal objekt per sida—det initiala antalet objekt per sida är inställt på fem i itemsPerPage stat.

Icke desto mindre kan du uppdatera detta nummer efter behov för att testa logiken. Slutligen läggs sedan varje sidnummer till sidor array. Låt oss nu implementera logiken för att visa ett antal objekt per sida.

konst indexOfLastItem = aktuell sida * itemsPerPage;
konst indexOfFirstItem = indexOfLastItem - itemsPerPage;
konst pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Den här koden bestämmer vilka uppgifter som ska renderas på webbläsarsidan baserat på nuvarande sida och itemsPerPage variabler – den extraherar motsvarande index för uppsättningen att göra från datamatrisen med hjälp av segmentmetoden. Indexen används sedan för att hämta de specifika uppgifterna som hör till den önskade sidan.

Uppdatera nu för att visa uppgifterna visa data fungerar genom att passera pageItems som en parameter. Här är en uppdaterad version av koden:

lämna tillbaka (
 <>
 Pagineringskomponent</h1> 
>
 {displayData (pageItems)}
 </>
);

Genom att göra denna uppdatering, visa data funktionen återger ett begränsat antal att göra-objekt på lämpligt sätt, vilket återspeglar den aktuella sidan.

Effektivisera sidåtkomst och navigering med navigeringsknappar

För att säkerställa att användarna enkelt kan navigera och komma åt innehåll på olika sidor måste du lägga till föregående och nästa knappar, samt knappar som anger de specifika sidnumren.

Låt oss först implementera logiken för sidnummerknapparna. I den Paginering komponent, lägg till koden nedan.

konst handleClick = (händelse) => {
 setcurrentPage(siffra(event.target.id));
 };
konst renderPageNumbers = pages.map((siffra) => {
om (nummer < maxPageNumberLimit +1 && nummer > minPageNumberLimit) {
lämna tillbaka (
 nyckel={nummer}
 id={nummer}
 onClick={handleClick}
 className={currentPage == nummer? "aktiva": null}
 >
 {siffra}
 </li>
 );
 } annan {
lämna tillbakanull;
 }
 });

De handleClick funktionen utlöses när en användare klickar på en sidnummerknapp. Denna åtgärd uppdaterar sedan nuvarande sida tillståndsvariabel med det valda sidnumret.

De renderPageNumbers variabeln använder Karta metod att iterera över sidor array och genererar dynamiskt listobjekt som representerar varje sidnummer. Den tillämpar villkorlig logik för att bestämma vilka sidnummer som ska renderas baserat på de definierade maximala och lägsta sidnumrens gränser.

Lägg slutligen till koden för nästa och föregående knapp.

konst handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
om (currentPage + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
om ((nuvarande sida - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

För att återge navigeringsknapparna, uppdatera JSX-elementen enligt följande:

lämna tillbaka (
 <>
 Pagineringskomponent</h1> 
>
 {displayData (pageItems)}
"sidnummer">




 onClick={handlePrevbtn}
 disabled={currentPage == sidor[0]? Sann: falsk}
 > Föregående
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == pages[pages.length - 1]? Sann: falsk}
 > Nästa
 </button>
 </li>
 </ul>
 </>
 );

När komponenten renderats kommer den att visa sidnumren, föregående och nästa knappar och motsvarande dataobjekt för den aktuella sidan.

Att välja mellan pagineringsbibliotek och anpassade pagineringssystem

När det gäller att välja mellan att använda pagineringsbibliotek eller bygga ett anpassat pagineringssystem beror valet på olika faktorer. Pagineringsbibliotek, såsom react-pagete, tillhandahåller förbyggda komponenter och funktionalitet, vilket möjliggör snabb och enkel implementering.

Å andra sidan, att bygga ett anpassat pagineringssystem med hjälp av React hooks ger mer flexibilitet och kontroll över pagineringslogiken och användargränssnittet. Beslutet kommer i slutändan att bero på dina specifika behov och preferenser.