Nettapplikasjoner håndterer store mengder data. For eksempel viser e-handelsapplikasjoner milliarder av data på en måte som er både organisert og visuelt tiltalende. Dataene må i hovedsak presenteres på en måte som er lett for brukere å forstå og navigere.

Å gjengi alle dataene på én enkelt side kan imidlertid føre til ytelsesproblemer, langsommere innlastingstider og dårlige brukeropplevelser. Av denne grunn kan implementering av pagineringslogikk redusere disse problemene betydelig.

I React kan du velge å bruke forhåndsbygde komponenter levert av pagineringsbiblioteker, alternativt kan du bygge et tilpasset pagineringssystem ved å bruke React-kroker.

Implementering av paginering på klientsiden

Det er to måter å implementere paginering i applikasjoner: paginering på klientsiden og serversiden. Uansett hvilket format du velger, forblir det underliggende konseptet det samme. Paginering på klientsiden innebærer å håndtere pagineringslogikken på klientsiden, i brukerens nettleser.

Du kan implementere paginering på klientsiden ved å bruke ulike teknikker. Disse teknikkene inkluderer:

1. Sidebasert paginering: Denne metoden innebærer å dele opp dataene i biter eller sider med fast størrelse, som vanligvis viser et visst antall elementer per side. Brukere kan navigere gjennom sidene ved å bruke navigasjonslenker eller knapper, merket med sidetall eller forrige og neste knapper. Dette er en populær implementering med søkemotorer og e-handelsapplikasjoner.
2. Uendelig scrolling: Denne metoden innebærer dynamisk lasting og gjengivelse av nye data mens brukeren ruller nedover siden, og skaper en sømløs og kontinuerlig nettleseropplevelse. Denne teknikken er spesielt nyttig når du arbeider med store datasett som utvides kontinuerlig, for eksempel feeds for sosiale medier.

Implementering av sidebasert paginering ved hjelp av React Hooks

For å komme i gang, lag et React-prosjekt. Du kan enten bruke create-react-app JavaScript-kommando for å sette opp en grunnleggende React-applokalt eller bruke Vite til å stillas et React-prosjekt på maskinen din.

Denne opplæringen har brukt Vite, du kan finne dette prosjektets kode i denne GitHub-depot.

Etter å ha satt opp React-prosjektet ditt, la oss fortsette med å implementere sidebasert paginering ved hjelp av React Hooks.

Konfigurering av datasettet

Ideelt sett vil du vanligvis hente og vise data fra en database. For denne opplæringen vil du imidlertid hente data fra en dummy JSONPlaceholder API i stedet.

I src katalog, opprette en ny komponenter/paginering fil, og legg til følgende kode.

1. Opprett en React funksjonell komponent og definer følgende tilstander.

   import Reager, { useEffect, useState } fra"reagere";
   import"./style.component.css";
   funksjonPaginering() {
   konst [data, setData] = brukState([]);
   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);
   komme tilbake (
    <>
   
    Pagineringskomponent</h1> 
   >
   
    </>
    );
   }
   eksportmisligholde Paginering;

2. Implementer logikken for å hente data fra dummy API. Inne i Paginering komponent, legg til nedenfor.

    useEffect(() => {
    hente(" https://jsonplaceholder.typicode.com/todos")
    .deretter((respons) => response.json())
    .deretter((json) => setData (json));
    }, []);
   konst displayData = (data) => {
   komme tilbake (
   
   
    {data.length > 0 &&
    data.map((gjøremål, indeks) => {
   komme tilbake<linøkkel={indeks}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Koden ovenfor tjener to hovedformål. Først, når komponenten monteres, vil den useEffect hook-triggere for å hente data fra det eksterne API-endepunktet som deretter konverteres til JSON-format. De resulterende JSON-dataene brukes deretter til å oppdatere data tilstandsvariabel med de hentede gjøremålsdataene. For det andre vise Data funksjonen tar de hentede dataene som et argument og gjengir dataene som en uordnet liste over gjøremål.
3. I retursegmentet til Paginering komponent, inkluderer vise Data funksjon for å gjengi de hentede dataene i nettleseren. Her er en oppdatert versjon av koden:

   komme tilbake (
    <>
    Pagineringskomponent</h1> 
   >
    {displayData (data)}
    </>
   );
   

   Ved å ringe displayData (data) innenfor JSX-elementet og passerer data tilstandsvariabel som en parameter, vil funksjonen deretter gjengi de hentede dataene som en uordnet liste i nettleseren.

I dette spesielle tilfellet består den gjengitte listen av to hundre gjøremål. Men i virkelige scenarier vil applikasjoner håndtere store mengder data. Å vise alle disse dataene på en enkelt nettside kan føre til ytelsesproblemer, for eksempel sakte nedlastingstider og generelt dårlig applikasjonsytelse.

For å løse dette vil det være egnet å inkorporere pagineringsfunksjonalitet for å sikre at hver side inneholder et begrenset antall elementer som brukere kan få tilgang til separat ved å bruke navigasjonsknappene.

Denne tilnærmingen lar brukere navigere gjennom dataene på en mer håndterlig og organisert måte, og forbedrer den generelle ytelsen og brukeropplevelsen til applikasjonen.

Implementering av pagineringslogikk for å vise et begrenset antall elementer per side

For å finne ut hvilke gjøremål som skal gjengis på hver side, må vi implementere den nødvendige logikken. Før du fortsetter, er det imidlertid viktig å bestemme det totale antallet sider som kreves basert på de tilgjengelige gjøremålene.

For å oppnå dette kan du legge til følgende kode til Paginering komponent:

konst sider = [];
til (la jeg = 1; jeg <= Matte.ceil (data.length / itemsPerPage); i++) {
 pages.push (i);
 }

Kodebiten ovenfor, itererer gjennom data array, beregner det totale antallet sider som trengs ved å dele lengden på data array etter ønsket antall elementer per side – det opprinnelige antallet elementer per side er satt til fem i elementerPerPage stat.

Likevel kan du oppdatere dette nummeret etter behov for å teste ut logikken. Til slutt legges hvert sidenummer til sider array. La oss nå implementere logikken for å vise et antall elementer per side.

konst indexOfLastItem = gjeldende side * itemsPerPage;
konst indexOfFirstItem = indexOfLastItem - itemsPerPage;
konst pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Denne koden bestemmer gjøremålene som skal gjengis på nettlesersiden basert på nåværende side og elementerPerPage variabler – den trekker ut de tilsvarende indeksene for settet med gjøremål fra datamatrisen ved å bruke slice-metoden. Indeksene brukes så til å hente de spesifikke gjøremålene som hører til den ønskede siden.

Nå, for å vise gjøremålene, oppdater vise Data funksjon ved å bestå sideelementer som en parameter. Her er en oppdatert versjon av koden:

komme tilbake (
 <>
 Pagineringskomponent</h1> 
>
 {displayData (pageItems)}
 </>
);

Ved å gjøre denne oppdateringen vil vise Data funksjonen vil gjengi et begrenset antall gjøremål på riktig måte, som gjenspeiler gjeldende side.

Strømlinjeforme sidetilgang og navigering med navigasjonsknapper

For å sikre at brukerne enkelt kan navigere og få tilgang til innhold på forskjellige sider, må du legge til forrige og neste knapper, samt knapper som spesifiserer de spesifikke sidetallene.

Først, la oss implementere logikken for sidenummerknappene. I Paginering komponent, legg til koden nedenfor.

konst handleClick = (begivenhet) => {
 settcurrentPage(Antall(event.target.id));
 };
konst renderPageNumbers = pages.map((Antall) => {
hvis (nummer < maxPageNumberLimit +1 && nummer > minPageNumberLimit) {
komme tilbake (
 nøkkel={nummer}
 id={nummer}
 onClick={handleClick}
 className={currentPage == nummer? "aktiv": null}
 >
 {Antall}
 </li>
 );
 } ellers {
komme tilbakenull;
 }
 });

De handleKlikk funksjonen utløses når en bruker klikker på en sidetallknapp. Denne handlingen oppdaterer deretter nåværende side tilstandsvariabel med valgt sidenummer.

De renderPageNumbers variabelen bruker kart metode for å iterere over sider array og genererer dynamisk listeelementer som representerer hvert sidetall. Den bruker betinget logikk for å bestemme hvilke sidetall som skal gjengis basert på de definerte maksimums- og minimumsgrensene for sidetall.

Til slutt legger du til koden for neste og forrige knapp.

konst handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
hvis (currentPage + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
hvis ((nåværende side - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

For å gjengi navigasjonsknappene, oppdater JSX-elementene som følger:

komme tilbake (
 <>
 Pagineringskomponent</h1> 
>
 {displayData (pageItems)}
"sidetall">




 onClick={handlePrevbtn}
 disabled={currentPage == sider[0]? ekte: falsk}
 > Forrige
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == sider[pages.length - 1]? ekte: falsk}
 > Neste
 </button>
 </li>
 </ul>
 </>
 );

Når komponenten er gjengitt, vil den vise sidetallene, forrige og neste knapper og de tilsvarende dataelementene for gjeldende side.

Velge mellom pagineringsbiblioteker og tilpassede pagineringssystemer

Når det gjelder å velge mellom å bruke pagineringsbiblioteker eller bygge et tilpasset pagineringssystem, avhenger valget av ulike faktorer. Pagineringsbiblioteker, for eksempel react-pagete, gir forhåndsbygde komponenter og funksjonalitet, noe som muliggjør rask og enkel implementering.

På den annen side, å bygge et tilpasset pagineringssystem ved å bruke React-kroker gir mer fleksibilitet og kontroll over pagineringslogikken og brukergrensesnittet. Avgjørelsen vil til syvende og sist avhenge av dine spesifikke behov og preferanser.