Sivutus

Pagination — sivunvaihto

<Pagination pagination={data.pagination} onPageChange={setPage} />

1–25 / 776                    ‹ Edellinen  1 2 3 4 5 … 32  Seuraava ›

DataTable renderöi tämän itse kun sille annetaan pagination ja onPageChange; erikseen sitä tarvitaan listoille jotka eivät ole taulukoita.

> Rivin pituus on vakio. Kun toinen katkaisu jää pois laidan lähellä, > ikkuna kasvaa yhdellä sen tilalle — muuten numerot liikkuisivat hiiren alta > sivua vaihtaessa. Laskenta on pageItemsissä ja testattu.

pageItems(1, 206)    // 1 2 3 4 5 … 206
pageItems(100, 206)  // 1 … 99 100 101 … 206

Ei sivukoon valitsinta. Se vaatisi päätöksen sallituista arvoista, ja se on palvelun rajapinnan asia.

> ⚠️ Sivutus pakottaa lajittelun palvelimelle. Jos sivutettu taulukko > lajitellaan selaimessa sortRowsilla, lajittelu järjestää vain näkyvät > 25 riviä ja näyttää järjestäneen kaikki 6 342. Käyttäjä klikkaa *Hinta*, > saa uskottavan järjestyksen, eikä mikään kerro että kallein on sivulla 47. > > Kun lisäät sivutuksen olemassa olevaan taulukkoon, siirrä lajittelu samaan > kyselyyn: sortStateToParams URLiin, palvelin järjestää, Pagination > viipaloi. > > Varoitus on ollut sortRowsin JSDocissa alusta asti, mutta väärässä > paikassa: sen lukee vasta se joka on jo päättänyt lajitella selaimessa. > Ansaan astutaan toisesta suunnasta — kun toimivaan taulukkoon lisätään > sivutus eikä kukaan kysy mitä lajittelulle tapahtuu. AIMO astui siihen > kolmesti kolmessa eri taulukossa. > > Ja sen toinen puoli: lajittelun vaihto palauttaa sivulle 1. Sivu 7 > uudessa järjestyksessä on mielivaltainen — käyttäjä ei etsi sieltä > mitään, mutta lista näyttää yhtä uskottavalta. > > ``ts > applyPageToParams(applySortToParams(nykyiset, uusiLajittelu), 1) > > > applySortToParams` ei nollaa sivua itse; se on palvelun päätös, koska > vain se tietää mitä muuta tilaa URLissa on. Lue nämä kaksi parina: > ensimmäinen tuottaa väärän järjestyksen, toinen oikean järjestyksen > väärältä sivulta, eikä kumpikaan epäonnistu näkyvästi kertaakaan.

Sivu URL-parametrina

// sivu vaihtuu
router.replace(`?${applyPageToParams(searchParams, sivu)}`);

// suodatin vaihtuu → sivu alkuun
const p = applyPageToParams(searchParams, 1);
p.set("haku", teksti);
router.replace(`?${p}`);

// palvelinkomponentissa
const sivu = pageFromParams(searchParams, { totalPages });

Sama kuvio kuin lajittelussa: paketti muuntaa parametreja, router jää palvelulle. PAGE_PARAM_NAMES on { page: "sivu", pageSize: "koko" }.

> Sivu 1 jätetään pois osoitteesta. ?sivu=1 on kohinaa. > > Nollaus on sama kutsu sivulla 1. Sivulla 12 tehty haku jättäisi > käyttäjän sivulle 12 tuloksessa jossa on kaksi sivua.