Pagination using Collections

Sometimes, when you need to display a large list of elements, it is interesting to paginate the results. In this tutorial, we will show you how to configure a collection that paginates its elements.

The Scenario

We will use a simple list of customers with name and email, stored in the hosted tables. They will be displayed in page with the collection limiting 5 items per page, and buttons on both sides that will be used to change the page. This is how the result will be:


First, we will need to retrieve all the elements from the source and store them in a variable. In this case, it will involve adding an execute "statement action", followed by a "set variable", on the "on page start" trigger. In our case, the statement is "All users", and retrieves all the users in our data set, and the variable is "allUsers".
Next, we will create a numeric variable "currentPage", and configure the collection to show only the 5 elements of the list that are in the current page. This is the code that should be in the collection's data source property:
Now, we create buttons "Next" and "Previous", that are responsible for changing the page. When you click the next button, it will add one to the currentPage variable, and when you click the previous button, it will subtract 1 from the currentPage variable.
These are the codes for the previous and next buttons, respectively:
To stop the user from going to pages that don't exist, we add the following code snippets to the "disabled" property in the previous and next buttons, respectively:
And now, you should have a fully functional paginated collection!