Bubble.io Pagination: How to Create Pagination for Repeating Groups

Imagine having a large list of data that users have to scroll up and down through to navigate. Instead of making them scroll through potentially hundreds of pages of information, you can add a pagination feature. This allows you to break up the data into easily-navigable pages.

Take Google, for example. When you search for something on Google, 1 page of results shows up, and you can continue to navigate through other pages with the pagination feature at the bottom. This makes it much easier to navigate and use the search results.

_______________________________

Plus, here are a few more ways to get help fast...

[stevenlevy]

Awesome tutorial. Incredibly helpful. Tried to book some time with you, but you are booked out until April, and could not wait unfortunately. Keep up the great content!

[pietupertrauka]

Thank you for the tutorial, honestly it's hard to believe that it's the ONLY tutorial for such widely used function... Definitely need more in depth tutorial on how to work with Repeating groups in real world, for example if RG is empty because of user filters - it would still take up all the page, and many other caveats.

[adityakashyap]

Hi i am a designer but I need this for one of my project. And my helper devs were struggling to do this but your video for pagination is so simple and clear and exactly what we want right now. Your content is proved a god gift for us. Thank you so much😊

[livingroomc]

Thanks for doing this. It was really helpful learning about the toolbox plugin. Your demonstration of the process was helpful. :)

[chrismaer]

Thanks for this video! Wonderfully edited and scripted. Got it working first try!

[darioems]

Thks for simple solution... I was searching for this solution, where was necessary create a limit for the repeating group number page. Helpful soution.

[abdulsamadmustafa]

You just won a subscriber - Very Impressive!

[volhakhvesko]

Hello! Please tell me this question. I have a repetition group with product cards, followed by another repetition group with page numbers. At a certain screen size, everything looks fine. But when I start expanding the page, there is a free space between the two repetitive groups. How to remove it?

[VarjaM]

Thank you for a great tutorial! Could you please help me resolve the following issue: when I click on a particular RG item, it takes me to another page. After I click the back button, it returns to the original page but always shows the 1st page of the RG no matter the RG page I was at before clicking the item. I know that it might have something to do with customs states and parameters, but I'm not sure how to set it with the list of items. Your help is much appreciated.

[LeraMulina]

3:42 I got lost at this moment. Have you set finally anything to page loaded action. Or you finally deleted it?

[Theempoweredgentz]

Hello Gaby,


thanks for this video. quick question if you don't mind...what element holds the state to change the color of the next page when clicking the arrow icons?


thanks in advance

[thomasmatthews]

Hi Gaby, thanks for the tutorial. Just wondering if I've got an API that is displaying an image from a user input search box, and a 'Go' button, how would I be able to add left and right toggles to loop to the next URL from my API response?

[blanksp_ace]

Hi! Thank you so much for your tutorial! It was really useful and I greatly appreciate it.

May I ask if it is possible to have dynamic page numbering displayed? So for example, if I have only two pages but my repeating group for the page numbers has a fixed number of 10 columns, is it possible to show just numbers 1 and 2 in the middle; instead of 1, 2 then 8 empty spaces?

[TheSantoshg]

This is great. When I implement this as guided in the tutorial, and have just, say a total 13 records in the database and I limit the records to be displayed as 10 per page, then it shows be 2 pages. When I click on the 2 for the second page, it show the additional 3 records along with some of the records from the first page to make up 10 per page. How does one just show the 3 additional records only and not have any repeats from the earlier page?

[marwansarieddine]

Thank you for this gaby - got two questions for you: In the case the results are 6, and the repeating group is set in your case to a fixed number of 10 rows, is there a way to collapse the remaining 4 rows ?
In the case the results are 66, the result of the division will have a remainder - in your case only 6 pages will show, when really it has to be 7, and also what I noticed is if I set it to 7, the previous page's rows are repeated so that I get a total of 10 rows in the 7th page, is there any way around this ?

Would really appreciate your response

[mayurchandra]

Great tutorial, can you please add how you created custom state to highlight active page?

[jeffymts]

Hi Gabi, Thanks for the tutorial. I have a doubt, as when I click on the last page, the system works perfect, but the number of cells does not follow... it only goes to page 2. How do I make it go to the last page too? Example: I'm on page 1 of 52. My cell number is 1 2 3 4 5 6 >:Next page >>: last page.
When I click to go to the last page, it goes to 52 (which is the last page), but my cell number goes to Number 7 (which would be the next page). How do I track my cell number and go to page 52?
Like yours does?
Thanks

[abdullahialfa]

Hi Gaby, thanks for these great tutorials. I have a RG and i want the list items to be counted and presented in order of frequency. How can i do that please?

[reecebrauer]

I see Gabi is not responding to any recent comments, only those from years ago. Hope you can answer mine Gabi.

How do you do pagination when you can't have fixed rows/columns? My RG needs to resize and i usually have 2 columns which folds down into 1 for mobile, so can't have that fixed. The whole process doesn't work without set columns/rows.

[eugenek]

Hi, Gaby! Thank you for your videos again!
I have 12 records in 10 records pagination - that is 2 pagination pages (10 + 2 records)
But actually what is happening when I click the 2nd pagination page: I still see the 10 records(two ones that were missing in the 1rt pagination page and the list now without first two record)
According to best practices of pagination behaviours, on the 2nd page I will see only 2 last records from the whole list - my question is: how to reach that?