When dealing with large collections or extensive external platforms, pagination becomes essential for efficient data management and user experience. This guide outlines various pagination methods and shows you how to implement them effectively.
Pagination functions similarly to a filter bar, so we recommend reading our guide on filters before diving into this topic. Don't worry—pagination and filtering are designed to work together smoothly.
If you're interested in adding a 'Load More' button or enabling 'Load More on Scroll,' check out our detailed guide on filters for step-by-step instructions.
Set-up
Much like the filterbar, you can also find the pagination among the other basic structure snippets. Be sure to also add a dynamic list. Your dynamic list and filterbar don't have to be added to the same component, but it is necessary to add your dynamic list first somewhere on the page, before configuring the pagination.
Connecting the pagination to the dynamic list
Connecting the pagination to the list, works exactly like connecting the filterbar to the list. You can follow the steps from this article.
Adding elements
You can locate the pagination elements in their own tab, when adding a new snippet.
The following elements are currently available:
Directional button
With a directional button, it is possible to navigate to the previous, next, first or last page of the pagination. You can populate this button with an icon and/or text. It is advised to add this button as a repeater, since you will probably want at least two of the four options.
Page buttons
Page buttons will automatically render all available pages. Page buttons have the following functionality options:
Number of pages before active page
Choose how many pages should be displayed before the currently active page. If, for example, the active page is page number 5, and this option is set to 3, page 2 to 5 will be displayed (if available).- Number of pages after active page
Choose how many pages should be displayed after the currently active page. If, for example, the active page is page number 5, and this option is set to 3, page 5 to 8 will be displayed (if available). - Always show first/last page
Always show the first/last page in the page buttons. This is an alternative for the first/last page directional button. - Number of pages after first/last page
Choose how many pages should be displayed after the first/last page. This setting is only applicable when the previous option is set to true.
Page input and page dropdown
Both these snippets will allow the user to change the active page by inputting or selecting a new page. The page input snippet will display a number input, while the page dropdown snippet will display a dropdown, with the available pages as prefilled options.
Entries per page
This snippet will allow the user to change how many entries will be displayed per page. You can choose to display a dropdown, or you can choose to use buttons. Both options will let you prefill the available options for the end user.
Active entries indicator
This snippet displays the range of entries currently visible. For example, if you're showing the first page of a paginated list, consisting of 6 entries, this snippet will display 1-6. You can change the divider in the CMS.
Total text
Show the total amount of pages, or the total amount of entries in text.
You can combine all these snippets to create a pagination that includes every feature. All snippets will work together seamlessly.