Web aplikacije upravljaju velikom količinom podataka. Na primjer, aplikacije za e-trgovinu prikazuju milijarde podataka na način koji je i organiziran i vizualno privlačan. U biti, podaci moraju biti predstavljeni na način koji je korisnicima jednostavan za razumijevanje i navigaciju.

Međutim, renderiranje svih podataka na jednoj stranici može dovesti do problema s izvedbom, sporijeg vremena učitavanja i lošeg korisničkog iskustva. Iz tog razloga, implementacija logike paginacije može značajno ublažiti ove probleme.

U Reactu se možete odlučiti za korištenje unaprijed izgrađenih komponenti koje pružaju knjižnice paginacije, alternativno možete izgraditi prilagođeni sustav paginacije koristeći React kuke.

Implementacija straničenja na strani klijenta

Postoje dva načina implementacije paginacije u aplikacijama: paginacija na strani klijenta i paginacija na strani poslužitelja. Unatoč tome, bez obzira na format koji odaberete, temeljni koncept ostaje isti. Paginacija na strani klijenta uključuje rukovanje logikom paginacije na strani klijenta, unutar korisničkog preglednika.

Paginaciju na strani klijenta možete implementirati različitim tehnikama. Ove tehnike uključuju:

1. Paginacija na temelju stranica: Ova metoda uključuje dijeljenje podataka u dijelove ili stranice fiksne veličine, obično prikazujući određeni broj stavki po stranici. Korisnici se mogu kretati kroz stranice koristeći navigacijske veze ili gumbe, označene brojevima stranica ili gumbe za prethodnu i sljedeću. Ovo je popularna implementacija u tražilicama i aplikacijama za e-trgovinu.
2. Beskonačno listanje: Ova metoda uključuje dinamičko učitavanje i prikazivanje novih podataka dok se korisnik pomiče niz stranicu, stvarajući besprijekorno i kontinuirano iskustvo pregledavanja. Ova je tehnika osobito korisna kada se radi o velikim skupovima podataka koji se kontinuirano proširuju, kao što su feedovi društvenih medija.

Implementacija paginacije temeljene na stranici pomoću React kukica

Za početak izradite React projekt. Možete koristiti ili create-react-app JavaScript naredba za postavljanje osnovne React aplikacijelokalno ili upotrijebite Vite za izradu skele React projekta na vašem stroju.

Ovaj vodič je koristio Vite, kod ovog projekta možete pronaći ovdje GitHub spremište.

Nakon postavljanja vašeg React projekta, nastavimo s implementacijom paginacije temeljene na stranici koristeći React Hooks.

Konfiguriranje skupa podataka

U idealnom slučaju, tipično biste dohvaćali i prikazivali podatke iz baze podataka. Međutim, za ovaj vodič ćete dohvatiti podatke iz lutke JSONPlaceholder API umjesto toga.

u src imenik, stvorite novi komponente/paginacija datoteku i dodajte sljedeći kod.

1. Napravite React funkcionalnu komponentu i definirajte sljedeća stanja.

   uvoz Reagiraj, {useEffect, useState} iz"reagirati";
   uvoz"./style.component.css";
   funkcijaPaginacija() {
   konst [podaci, setData] = useState([]);
   konst [trenutnaStranica, postavitekućuStranicu] = useState(1);
   konst [itemsPerPage, setitemsPerPage] = useState(5);
   konst [pageNumberLimit, setpageNumberLimit] = useState(5);
   konst [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   konst [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   povratak (
    <>
   
    Komponenta paginacije</h1> 
   >
   
    </>
    );
   }
   izvozzadano Paginacija;

2. Implementirajte logiku za dohvaćanje podataka iz lažnog API-ja. Unutar Paginacija komponentu, dodajte dolje.

    useEffect(() => {
    dohvati (" https://jsonplaceholder.typicode.com/todos")
    .zatim((odgovor) => response.json())
    .zatim((json) => setData (json));
    }, []);
   konst prikaz podataka = (podaci) => {
   povratak (
   
   
    {data.length > 0 &&
    data.map((todo, indeks) => {
   povratak<liključ={indeks}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Gornji kod služi u dvije glavne svrhe. Prvo, nakon što se komponenta montira, useEffect okidači kuke za dohvaćanje podataka s vanjske API krajnje točke koji se zatim pretvaraju u JSON format. Rezultirajući JSON podaci zatim se koriste za ažuriranje podaci varijabla stanja s dohvaćenim podacima o obvezama. Drugo, displayData funkcija će uzeti dohvaćene podatke kao argument i prikazati podatke kao neuređeni popis zadataka.
3. U segmentu povratka Paginacija komponenta, uključuje displayData funkcija za prikaz dohvaćenih podataka u pregledniku. Evo ažurirane verzije koda:

   povratak (
    <>
    Komponenta paginacije</h1> 
   >
    {displayData (podaci)}
    </>
   );
   

   Pozivom displayData (podaci) unutar JSX elementa i prosljeđivanje podaci varijablu stanja kao parametar, funkcija će zatim prikazati dohvaćene podatke kao neuređeni popis u pregledniku.

U ovom konkretnom slučaju, prikazani popis sastoji se od dvjesto zadataka. Međutim, u scenarijima stvarnog svijeta aplikacije će upravljati velikim količinama podataka. Prikaz svih ovih podataka na jednoj web-stranici može rezultirati problemima s performansama, kao što su sporo učitavanje i sveukupno loše performanse aplikacije.

Kako bi se to riješilo, bilo bi prikladno uključiti funkcionalnost označavanja stranica kako bi se osiguralo da svaka stranica sadrži ograničeni broj stavki kojima korisnici mogu zasebno pristupiti korištenjem navigacijskih gumba.

Ovaj pristup omogućuje korisnicima navigaciju kroz podatke na upravljiviji i organiziraniji način, poboljšavajući cjelokupnu izvedbu i korisničko iskustvo aplikacije.

Implementacija logike paginacije za prikazivanje ograničenog broja stavki po stranici

Kako bismo odredili koje će se stavke zadataka prikazati na svakoj stranici, moramo implementirati potrebnu logiku. Međutim, prije nego što nastavite, bitno je odrediti ukupan broj potrebnih stranica na temelju dostupnih stavki obaveza.

Da biste to postigli, možete dodati sljedeći kod u Paginacija komponenta:

konst stranice = [];
za (neka ja = 1; ja <= matematika.ceil (data.length / itemsPerPage); i++) {
 stranice.push (i);
 }

Gornji isječak koda ponavlja kroz podaci niz, računajući ukupan broj potrebnih stranica dijeljenjem duljine podaci niz prema željenom broju stavki po stranici—početni broj stavki po stranici postavljen je na pet u stavke po stranici država.

Unatoč tome, možete ažurirati ovaj broj prema potrebi kako biste testirali logiku. Na kraju se svaki broj stranice dodaje u stranice niz. Implementirajmo sada logiku za prikaz broja stavki po stranici.

konst indexOfLastItem = trenutna stranica * stavke po stranici;
konst indexOfFirstItem = indexOfLastItem - itemsPerPage;
konst pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Ovaj kod određuje zadatke koje treba prikazati na stranici preglednika na temelju Trenutna stranica i stavke po stranici varijable—izvlači odgovarajuće indekse za skup zadataka iz niza podataka pomoću metode odsječka. Indeksi se zatim koriste za dohvaćanje specifičnih obaveza koje pripadaju željenoj stranici.

Sada, za prikaz zadataka, ažurirajte displayData funkcija prolazeći pageItems kao parametar. Evo ažurirane verzije koda:

povratak (
 <>
 Komponenta paginacije</h1> 
>
 {displayData (pageItems)}
 </>
);

Ovim ažuriranjem, displayData funkcija će na odgovarajući način prikazati ograničeni broj zadataka, odražavajući trenutnu stranicu.

Pojednostavljanje pristupa stranici i navigacije pomoću navigacijskih gumba

Kako biste korisnicima osigurali jednostavnu navigaciju i pristup sadržaju na različitim stranicama, trebate dodati gumbe za prethodni i sljedeći, kao i gumbe koji određuju određene brojeve stranica.

Prvo, implementirajmo logiku za gumbe s brojevima stranica. u Paginacija komponentu, dodajte kod u nastavku.

konst rukovanjeKlik = (događaj) => {
 setcurrentPage(Broj(event.target.id));
 };
konst renderPageNumbers = pages.map((broj) => {
ako (broj < maxPageNumberLimit +1 && broj > minPageNumberLimit) {
povratak (
 ključ={broj}
 id={broj}
 onClick={handleClick}
 className={currentPage == broj? "aktivan": ništavan}
 >
 {broj}
 </li>
 );
 } drugo {
povratakništavan;
 }
 });

The ručkaClick funkcija se aktivira kada korisnik klikne gumb s brojem stranice. Ova radnja zatim ažurira Trenutna stranica varijabla stanja s odabranim brojem stranice.

The renderPageNumbers varijabla koristi karta metoda za ponavljanje stranice polje i dinamički generira stavke popisa koje predstavljaju svaki broj stranice. Primjenjuje uvjetnu logiku za određivanje brojeva stranica koje treba prikazati na temelju definiranih ograničenja maksimalnog i minimalnog broja stranica.

Na kraju dodajte kod za sljedeće i prethodne gumbe.

konst handleNextbtn = () => {
 postavi trenutnu stranicu (trenutna stranica + 1);
ako (trenutna stranica + 1 > maxPageNumberLimit) {
 postavimaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst ručkaPrevbtn = () => {
 setcurrentPage (currentPage - 1);
ako ((Trenutna stranica - 1) % Ograničenje broja stranice == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Da biste prikazali navigacijske gumbe, ažurirajte JSX elemente na sljedeći način:

povratak (
 <>
 Komponenta paginacije</h1> 
>
 {displayData (pageItems)}
"brojevi stranica">




 onClick={handlePrevbtn}
 onemogućeno={currentPage == stranice[0]? pravi: lažno}
 > Prethodna
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 onemogućeno={currentPage == stranice[pages.length - 1]? pravi: lažno}
 > Dalje
 </button>
 </li>
 </ul>
 </>
 );

Nakon što se komponenta renderira, prikazat će brojeve stranica, prethodne i sljedeće gumbe i odgovarajuće podatkovne stavke za trenutnu stranicu.

Odabir između biblioteka paginacije i prilagođenih sustava paginacije

Kada je riječ o odlučivanju između korištenja biblioteka paginacije ili izgradnje prilagođenog sustava paginacije, izbor ovisi o različitim čimbenicima. Knjižnice paginacije, kao što je react-paginate, pružaju unaprijed izgrađene komponente i funkcionalnost, omogućujući brzu i jednostavnu implementaciju.

S druge strane, izgradnja prilagođenog sustava paginacije pomoću React kukica nudi veću fleksibilnost i kontrolu nad logikom paginacije i korisničkim sučeljem. Odluka će u konačnici ovisiti o vašim specifičnim potrebama i preferencijama.