๐Ÿ“„ Pagination in the Frontend

In this tutorial, we show you how to add pagination in the frontend.

๐Ÿšจ Warning ๐Ÿšจ

This is not intuitive but, for the Paginator element to work, the Collection it relates to must be bound to Collection, not Collection['data']

Adding Pagination in the Frontend

Before we go any further, note that when you add pagination in the frontend, all your collection items loaded in the user's browser, even if only 10 items are displayed on the page.

If you do not want this to happen, consider adding pagination in your backend before fetching the collection in WeWeb.

Learn more about server-side (backend) vs client-side (frontend) pagination here.

If you do want to add pagination in the frontend, here's how you do it in WeWeb:

Styling the Paginator

You can style any element inside the Paginator, change the style of the arrows or change the color of the active page number for example.

To change the color of the active page number:

  • select the "Text" element inside the Paginator,
  • create an "active" state in the style section of this element,
  • select the "active" state and style it like you would any other state.

In the example below, we styled the Paginator's "Text" element so that the active page number appears blue and bold:

Setup a Load More Button

You don't have to use the Paginator element to paginate your Collection.

You could add a Button element with a workflow to load more items from your Collection.

Here's how.

Step 1: Add a Button to your Page

Drag-and-drop a Button on the Canvas or Navigator, wherever you want to display it on the Page.

In the example below, we placed it below our list of jobs:

Step 2: Create a loadMore Variable

This Variable will be of Type "Number".

Its default value will be the number of additional items you want to load every time the user clicks on the button to load more items.

In the example below, we want to reveal 3 new items:

Step 3: Add a Workflow on the Button

On the Button you created in step 1, add a Workflow with to Change variable value of the Variable you created in step 2.

In the example below, we are saying:

  • when the user clicks on the button,
  • add 3 to the loadMore variable

Now, when we bind our Collection List , we need to tell the browser to only display the default number items we defined in step 2.

In order to do that, we have to "slice" our list:

In code, this is how the ย slice ย formula works with arrays:

  • it takes an array โ€“ jobs['data'] ย in the example above, and
  • returns a portion of that array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array.

In our example, the start index is 0 โ€“ which means the first item in the Array in code โ€“ and our end index is 3 โ€“ as defined in the loadMore ย variable.

As a result, you can see in the "Current value" preview above that items with index 0, 1, and 2 are returned.

๐Ÿšจ Warning ๐Ÿšจ

The slice ย formula is an Array function so you need to bind to your ย collection['data'] ย . If you bind to {}collection , it will not work because you are binding to an Object.

Step 5: Test in Preview Mode

Ok, that should work. Back in Preview mode, you can click on the "Load more" Button to see the loadMore variable be updated in the Navigator and the additional items displayed on the page:

Last modified on

June 3, 2022