Spletne aplikacije upravljajo velike količine podatkov. Aplikacije za e-trgovino na primer prikazujejo milijarde podatkov na organiziran in vizualno privlačen način. V bistvu morajo biti podatki predstavljeni na način, ki ga uporabniki zlahka razumejo in se po njih zlahka premikajo.

Vendar lahko upodabljanje vseh podatkov na eni sami strani povzroči težave z zmogljivostjo, počasnejši čas nalaganja in slabo uporabniško izkušnjo. Iz tega razloga lahko izvajanje logike paginacije znatno ublaži te težave.

V Reactu se lahko odločite za uporabo vnaprej zgrajenih komponent, ki jih nudijo knjižnice za ostranjevanje, ali pa lahko zgradite sistem za ostranjevanje po meri s kavlji React.

Implementacija strani na strani odjemalca

Ostranjevanje v aplikacijah lahko implementirate na dva načina: ostranjevanje na strani odjemalca in na strani strežnika. Ne glede na obliko, ki jo izberete, osnovni koncept ostaja enak. Paginacija na strani odjemalca vključuje ravnanje z logiko paginacije na strani odjemalca znotraj brskalnika uporabnika.

Paginacijo na strani odjemalca lahko implementirate z različnimi tehnikami. Te tehnike vključujejo:

1. Paginacija na podlagi strani: Ta metoda vključuje razdelitev podatkov na dele ali strani s fiksno velikostjo, ki običajno prikazujejo določeno število elementov na stran. Uporabniki se lahko premikajo po straneh z uporabo navigacijskih povezav ali gumbov, označenih s številkami strani ali gumbi za prejšnjo in naslednjo. To je priljubljena izvedba v iskalnikih in aplikacijah za e-trgovino.
2. Neskončno drsenje: Ta metoda vključuje dinamično nalaganje in upodabljanje novih podatkov, ko se uporabnik pomika navzdol po strani, kar ustvarja brezhibno in neprekinjeno izkušnjo brskanja. Ta tehnika je še posebej uporabna pri delu z velikimi nabori podatkov, ki se nenehno širijo, kot so viri družbenih medijev.

Implementacija paginacije na podlagi strani z uporabo React Hooks

Za začetek ustvarite projekt React. Uporabite lahko bodisi create-react-app JavaScript ukaz za nastavitev osnovne aplikacije Reactlokalno oz uporabite Vite za gradnjo projekta React na vašem stroju.

Ta vadnica je uporabila Vite, kodo tega projekta najdete tukaj Repozitorij GitHub.

Ko nastavite svoj projekt React, nadaljujte z implementacijo paginacije na podlagi strani z uporabo React Hooks.

Konfiguriranje nabora podatkov

V idealnem primeru bi običajno pridobili in prikazali podatke iz baze podatkov. Vendar pa boste za to vadnico pridobili podatke iz lutke JSONPlaceholder API namesto tega.

V src imenik, ustvarite novega komponente/paginacija datoteko in dodajte naslednjo kodo.

1. Ustvarite funkcionalno komponento React in definirajte naslednja stanja.

   uvoz Odziv, {useEffect, useState} od"reagirati";
   uvoz"./style.component.css";
   funkcijoPaginacija() {
   konst [podatki, 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);
   vrnitev (
    <>
   
    Komponenta paginacije</h1> 
   >
   
    </>
    );
   }
   izvozprivzeto Paginacija;

2. Izvedite logiko za pridobivanje podatkov iz navideznega API-ja. Znotraj Paginacija komponento dodajte spodaj.

    useEffect(() => {
    prinesi (" https://jsonplaceholder.typicode.com/todos")
    .potem((odgovor) => response.json())
    .potem((json) => setData (json));
    }, []);
   konst displayData = (podatke) => {
   vrnitev (
   
   
    {data.length > 0 &&
    data.map((todo, indeks) => {
   vrnitev<liključ={index}>{todo.title}li>;
    })}
    </ul>
    );
    };
   

   Zgornja koda ima dva glavna namena. Prvič, ko je komponenta nameščena, useEffect hook sprožilci za pridobivanje podatkov iz zunanje končne točke API, ki se nato pretvorijo v format JSON. Nastali podatki JSON se nato uporabijo za posodobitev podatke spremenljivka stanja s pridobljenimi podatki o opravilih. Drugič, displayData funkcija bo pridobljene podatke vzela kot argument in podatke upodobila kot neurejen seznam opravil.
3. V povratnem segmentu Paginacija komponento, vključujejo displayData funkcijo za upodabljanje pridobljenih podatkov v brskalniku. Tukaj je posodobljena različica kode:

   vrnitev (
    <>
    Komponenta paginacije</h1> 
   >
    {displayData (podatki)}
    </>
   );
   

   S klicem displayData (podatki) znotraj elementa JSX in posredovanje podatke spremenljivko stanja kot parameter, bo funkcija nato upodobila pridobljene podatke kot neurejen seznam v brskalniku.

V tem posebnem primeru je upodobljeni seznam sestavljen iz dvesto opravil. Vendar pa bodo v realnih scenarijih aplikacije upravljale velike količine podatkov. Prikazovanje vseh teh podatkov na eni spletni strani lahko povzroči težave z zmogljivostjo, kot so počasno nalaganje in splošno slabo delovanje aplikacije.

Za rešitev tega bi bilo primerno vključiti funkcijo označevanja strani, da bi zagotovili, da vsaka stran vsebuje omejeno število elementov, do katerih lahko uporabniki ločeno dostopajo z uporabo navigacijskih gumbov.

Ta pristop omogoča uporabnikom krmarjenje po podatkih na bolj obvladljiv in organiziran način, s čimer se izboljša splošno delovanje in uporabniška izkušnja aplikacije.

Implementacija logike označevanja strani za prikaz omejenega števila elementov na stran

Da določimo, kateri elementi opravil bodo upodobljeni na vsaki strani, moramo implementirati potrebno logiko. Vendar pa je pred nadaljevanjem bistveno določiti skupno število potrebnih strani glede na razpoložljive elemente opravil.

Če želite to doseči, lahko dodate naslednjo kodo v Paginacija komponenta:

konst strani = [];
za (pustiti jaz = 1; jaz <= matematika.ceil (data.length / itemsPerPage); i++) {
 pages.push (i);
 }

Zgornji delček kode ponavlja skozi podatke matriko, pri čemer izračuna skupno število potrebnih strani z deljenjem dolžine podatke po želenem številu elementov na stran – začetno število elementov na stran je nastavljeno na pet v itemsPerPage država.

Kljub temu lahko to številko po potrebi posodobite, da preizkusite logiko. Na koncu se številka vsake strani doda v strani niz. Zdaj pa implementirajmo logiko za prikaz števila elementov na stran.

konst indexOfLastItem = trenutna stran * itemsPerPage;
konst indexOfFirstItem = indexOfLastItem - itemsPerPage;
konst pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

Ta koda določa opravila, ki jih je treba upodabljati na strani brskalnika trenutna stran in itemsPerPage spremenljivke—izvleče ustrezne indekse za nabor opravil iz podatkovne matrike z uporabo metode rezine. Indeksi se nato uporabijo za pridobivanje specifičnih opravil, ki pripadajo želeni strani.

Zdaj, da prikažete opravila, posodobite displayData funkcijo s prehodom pageItems kot parameter. Tukaj je posodobljena različica kode:

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

S to posodobitvijo je displayData funkcija bo ustrezno upodobila omejeno število opravil, ki odražajo trenutno stran.

Poenostavitev dostopa do strani in navigacije z navigacijskimi gumbi

Če želite uporabnikom zagotoviti enostavno navigacijo in dostop do vsebine na različnih straneh, morate dodati gumbe za prejšnji in naslednji ter gumbe, ki določajo številke določenih strani.

Najprej implementirajmo logiko za gumbe s številkami strani. V Paginacija komponento dodajte spodnjo kodo.

konst handleClick = (dogodek) => {
 setcurrentPage(številka(event.target.id));
 };
konst renderPageNumbers = pages.map((število) => {
če (število < maxPageNumberLimit +1 && število > minPageNumberLimit) {
vrnitev (
 ključ={število}
 id={število}
 onClick={handleClick}
 className={currentPage == številka? "aktiven": nič}
 >
 {število}
 </li>
 );
 } drugače {
vrnitevnič;
 }
 });

The handleClick funkcija se sproži, ko uporabnik klikne gumb s številko strani. To dejanje nato posodobi trenutna stran spremenljivko stanja z izbrano številko strani.

The renderPageNumbers spremenljivka uporablja zemljevid metoda za ponavljanje strani matriko in dinamično ustvari elemente seznama, ki predstavljajo vsako številko strani. Uporablja pogojno logiko, da določi, katere številke strani je treba upodobiti na podlagi definiranih omejitev največjega in najmanjšega števila strani.

Nazadnje dodajte kodo za naslednji in prejšnji gumb.

konst handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
če (trenutna stran + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
konst handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
če ((trenutna stran - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

Za upodobitev navigacijskih gumbov posodobite elemente JSX na naslednji način:

vrnitev (
 <>
 Komponenta paginacije</h1> 
>
 {displayData (pageItems)}
"številke strani">




 onClick={handlePrevbtn}
 onemogočeno={currentPage == strani[0]? prav: lažno}
 > Prejšnja
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 onemogočeno={currentPage == strani[pages.length - 1]? prav: lažno}
 > Naprej
 </button>
 </li>
 </ul>
 </>
 );

Ko se komponenta upodobi, bo prikazala številke strani, prejšnja in naslednja gumba ter ustrezne podatkovne postavke za trenutno stran.

Izbira med knjižnicami paginacije in sistemi paginacije po meri

Ko se je treba odločiti med uporabo knjižnic za ostranjevanje ali gradnjo sistema za ostranjevanje po meri, je izbira odvisna od različnih dejavnikov. Knjižnice za ostranjevanje, kot je react-paginate, zagotavljajo vnaprej zgrajene komponente in funkcionalnost, kar omogoča hitro in preprosto implementacijo.

Po drugi strani pa izgradnja sistema za označevanje strani po meri z uporabo kavljev React ponuja večjo prilagodljivost in nadzor nad logiko označevanja strani in uporabniškim vmesnikom. Odločitev bo na koncu odvisna od vaših posebnih potreb in preferenc.