How can I use the enable server side pagination on mobile using collectionView?

[Jane_Santos]

Hello! I'm using a collectionView in a mobile application to display products we want to sell. However, I'm encountering an issue due to having more than 1,500 products to display in this collectionView, which results in a delay of 15 seconds. I've noticed that server-side pagination can be utilized with this component, but upon enabling it, I'm unable to find options to configure the 'previous' and 'next' buttons. Additionally, it seems impossible to implement pagination within the database configuration itself.

Moreover, when I enable server-side pagination, no settings appear for configuring the buttons.

Could anyone advise on how to adjust this tool to manage the loading of the 1,000 items I need to display in the collectionView?

[Paulo]

Hi @Jane_Santos, welcome to the forum!

Checkout @victoria's app on this thread. You can create an app from the JSON file she shared and see how this is done.

[Jane_Santos]

Hi @Paulo, thanks for your answer!

The JSON that Victoria sent is for a Web App, what I need is for a Mobile App. I could even use her idea and create pagination from scratch, but the pageInput component she uses is not available in the Mobile App.

[Paulo]

I missed that, I'm sorry. Here is a workaround for List View pagination on Mobile:

Create a State variable with a default value of 0. We'll increment/decrement this value with page changing buttons:

Add 'limit' and 'offset' to your query, use the variable for the offset:

Note: I recommend using a limit/offset number that allows the screen to show all of the records of this "limited" query, plus two buttons below, for a smooth transition between pages. Too small of a number will make the component change sizes while the query is running, too big of a number will require your users to scroll to get to the navigation buttons. The right number will depend on the size of the repeatable.

Create two buttons that we'll use for navigation:

Note: Disable the "Previous" button if the value of the variable we created is 0 (no previous pages).

Disable the "Next" button if we have less results than the limit number (no more results).

Note: The syntax for this will be different if you are formatting the results of the query to an array ({{getRows.data.length < 8}}).

Finally, add event handlers to the buttons to increment/decrement the value of the variable:

This should work like a charm. Feel free to ask any questions.

[Jane_Santos]

That's exactly what I need. Thank you so much @Paulo!

[Paulo]

you are welcome!

[Paulo]

Update: We can use the selectedPageIndex property of the Collection View to set server-side pagination without the need of a State variable. Although there is no event handler for 'Change page' on this component, if we set this query to run automatically, it will run every time the value changes: