Need Help: Pagination for external API items

I run an ecommerce tool and right now all of my product data is housed on an external database (Xano). This means that all of my product data is pulled in through a variety of API calls.

What I’m wondering is how I would go about creating a pagination menu at the bottom of my search results for items that are coming from an API, not the native Bubble DB.

All of the guides/videos I’ve read show how to do this with a native Bubble DB, but not via an API and I’m wondering if anybody knows of a solution for this?

I know from a high-level POV I basically am going to be calling “page=1” for the initial results and then when I click the “next” or “2” button under my results Bubble would be sending another API request with "page=[whatever number was selected].

That part is easy to figure out, I guess the real question is how can I create that “pagination menu” at the bottom to auto populate with the correct number of pages available for that search/api call?

If you return the total items and divide by your page size and grab the ceiling you know the total number of pages. Then you make a list of numbers from 0 thru to the ceiling. That list in a RG could be used to send the page number as a query override.

2 Likes

@brandon8 It depends on how your API response is setup. But generally, there is a total count of results that are returned for a particular request and the body of the response has a sub list. So, for example, total count = 50 and your page size is 10 (this number of results returned in the body response), then you know there are a total of 5 pages (which become your pagination menu.

That makes sense! I’ve got full control over what data is sent to Bubble in my API request and as you can see I don’t even need to do the math as there is a field with the total number of pages:
image

What I’m having a harder time grasping is how I would go about displaying that dynamic list. So say the response tells Bubble that there are 9 pages of products.

How would I go about automatically creating a “menu” with a list of 1-9? Seems like this would be such a common scenario that Bubble would have something native built in by now.

You can use the Listofnumbers element from the Toolbox plugin to create a dynamic length list, which will be the source of data for your pagination repeating group.

Perhaps just searching the forum for this Listofnumbers element will give you some examples on how it is used. Sorry, I do not have a link handy on how to use that element, but it’s relatively straight forward.

2 Likes

Or lots of other solutions…

1 Like

Hello friend, I already did that step, my answer is similar to the one in this post, I have a popup where the source is the api call and the repeating group is filled with the item array but when I make the page change I get It still shows the same array of the initial page.

When I click on the number in the list, I call the api again and assign it to the source of the popup. Could you tell me what I’m doing wrong?