Backend Pagination from Xano with load more button

I have a load more button at the bottom of my product results page. I’ve seen the method to add a load more button through the guides and seen discussion on the forum but I think that only works for frontend pagination and can’t get it to work with Xano pagination.

Is there a method that would work with backend pagination to have a load more button?

@Osman, did you get this working? I’m also interested in implementing this!

Hi @jarryd, I was able to get it to work.

You need to set up the pagination in Xano through the output tab by putting in a value.

Then you need to create an input which is an integer for the paging and set this to the page in the external tab for Xano.

Then in WeWeb, you will need a few variables. One variable would be for the page number (how many times the load more has been clicked and you want the default value to be 1). You will also need an array variable which will store all of the items (so this is what is visible to the users). You will also need an array which would hold the values collected from a Xano request.

Once you have created those variables, then you want it so that when the load more button is clicked, your variable for page is +1 and then you want to send a Xano request with that page variable.

Then in the workflow, you need to change the value of the temporary array to include the result from the workflow action of the xano request for the data.

Then, change the variable value of the main array by merging the main array with the temporary array.

Let me know if you need any clarifications!

4 Likes