Paginering

Verdeelt een lange lijst automatisch over meerdere pagina's: bezoekers bladeren met vorige/volgende-knoppen en paginanummers. Als onderdeel van een lijst werkt het volledig vanzelf — het totaal wordt automatisch geteld. De technische naam is Pagination.

Gebruik dit block zodra een lijst te lang wordt om in één keer te tonen: een kennisbank met tientallen artikelen, een forumoverzicht of een productcatalogus. Zonder paginering laadt de pagina alles in één keer, wat traag aanvoelt en bezoekers het overzicht doet verliezen.

Dit block werkt altijd samen met een Records-block: geef de lijst een limiet mee en Pagination telt het totaal en genereert de knoppen automatisch, zonder dat je zelf hoeft bij te houden hoeveel pagina's er zijn.

Toepassingen per site-type

Een webshop met honderden producten in een categorie gebruikt Pagination om de laadtijd behapbaar te houden: in plaats van alle producten in één keer te laden, toont de pagina er bijvoorbeeld twintig per keer. Een portfolio-site met tientallen projecten zet dit block onderaan het projectenoverzicht, zodat de pagina overzichtelijk blijft in plaats van een lange scroll. Bij een zakelijke dienstverlener met een uitgebreide kennisbank, zoals veelgestelde vragen of vakartikelen, helpt paginering bezoekers om gericht te bladeren in plaats van door tientallen items te moeten scrollen om iets te vinden.

Een veelgemaakte fout is een te laag of te hoog aantal items per pagina kiezen: te weinig items per pagina (bijvoorbeeld twee of drie) dwingt bezoekers tot overmatig klikken, terwijl te veel items het voordeel van paginering weer tenietdoet. Vijftien tot vierentwintig items per pagina werkt voor de meeste overzichten goed, afhankelijk van hoe groot elk item wordt weergegeven. Een tweede valkuil is paginering combineren met een filter zonder de paginering te resetten: als een bezoeker filtert nadat hij al op pagina drie zit, kan hij op een lege pagina belanden.

Dit block hoort altijd bij een Records-block met een limit-prop; zonder die limiet heeft paginering niets om te verdelen. Combineer het eventueel met een Search-block bovenaan de lijst, zodat bezoekers ook direct kunnen zoeken in plaats van steeds door te bladeren.

Voor toegankelijkheid is het belangrijk dat de vorige/volgende-knoppen en paginanummers met het toetsenbord bereikbaar zijn en dat de huidige pagina duidelijk visueel afwijkt van de andere nummers — niet alleen met kleur, want dat is voor kleurenblinde bezoekers onvoldoende onderscheid.

Voorbeeld

De prompt voor dit voorbeeld

Toon de kennisbank-artikelen met 2 per pagina en bladerknoppen eronder.