Pagination for Repeating Groups - Bubble Tutorial

Be the first to hear about our latest tutorials, plugin releases, updates and more: www.cranfordte...
In this bubble.io tutorial I'll show how you can implement a pagination feature for your bubble app.
Pagination makes it easier for users to navigate your bubble app, particularly if your page has a repeating group that contains a lot of data.
An additional benefit of pagination is that it can make it quicker for bubble to retrieve data from your app's database. This can improve page load speed and help with SEO.
💼 Hire us to build your custom app
www.cranfordte...
💼 NoCode Job Board Template:
bubble.io/temp...
🎨 Check out our other Templates and Plugins:
bubble.io/cont...
📧 Contact: [e-mail]

[@HennieScheepers]

Fantastic video, keep 'em coming...

[@CranfordTech]

@@HennieScheepers thank you! 🙂

[@vera.africa]

This tutorial is clear and helpful, thanks a bunch!

[@CranfordTech]

Glad it was helpful!

[@fheralanis]

Thanks for the help !!

[@CranfordTech]

No problem 🙂

[@Harrisk101MC]

Thanks for the help, was able to make it dynamic. Thanks for making this video!

[@CranfordTech]

Glad it was helpful!

[@shishirkarki7971]

This tutorial is excellent. It's incredibly easy to follow and understand. Thank you so much🙌

[@CranfordTech]

Glad it was helpful! 🙂

[@ericksousa5666]

Thanks! This video saved me at least 16 hours learning how to do it!

[@CranfordTech]

Great to hear! Thanks for the kind words

[@consiliumapp]

Thanks a lot!!!! Great tutorial!

[@CranfordTech]

Glad you liked it!

[@hamidkaramyar8695]

Thanks for a great tutorial.

[@CranfordTech]

No problem Hamid! Glad it was helpful

[@LeraMulina]

Great tutorial! Everything is very easy for understanding. Thank you very much!

[@CranfordTech]

Thank you for the kind words!

[@dailyprayer-b1n]

Thank you very much its a great video and easy to follow thx😊

[@CranfordTech]

Great to hear!

[@morrismugwima]

The video explains it well, but how can you implement pagination on tables?

[@kipyegonkurgat5615]

Crystal Clear. Thanks

[@prajnak7856]

Will this method work if you had only a few posts? Because it didn't work for me.

[@julius-forster]

Actually wanted to know how to get the roundness. Since i used an existing style from the list, I had to click on "Edit Style". I found that out through this video after searching for 3 hours. Thank you so much man (even if that wasn't the purpose of this video)

[@CranfordTech]

Glad it helped Julius! And thanks for the kind words

[@Steve-js7bp]

very good!

[@paulnocode]

Thank you..... 🤗🤗🤗

[@CranfordTech]

No problem!

[@AhmedKhodir-novyPro]

hi there, thanks for the tutorial, but I have one quetion: You have defined the number of rows for the RG which will work fine when you have only one job card per row, but in my case I have 4 cards per row and inorder to make the page responsive I can't set a fixed number of rows nor columns to make it responsive, how would you suggest to tackle this?

[@CranfordTech]

Hi Ahmed, thanks for the comment. Afraid I don't fully understand your problem - if you want to post a link to your editor (either here or via email to [e-mail]) I'm happy to take a look!

[@은우-s2u]

thank you for the good tutorial! by the way, how can I download the ListOfNumbers plugin?

[@CranfordTech]

No problem, glad you liked it! The plugin I use is the "toolbox" plugin

[@은우-s2u]

@@CranfordTech Thank you for your answer!!

[@CranfordTech]

@@은우-s2u no problem!

[@wdriscoll90]

Thanks for a great tutorial. Can I ask two questions - how to limit the number of pages shown in the repeating group if it increases to say 100 pages, will this be automatically handled by the max size of the group? Secondly, how to tie this in with url parameter to navigate directly to the correct page from url? Thanks again

[@CranfordTech]

Hey Will, thanks for the comment and sorry for the late response. 1. The way I've setup the RG in the above video will not handle > 100 pages. What you would need to do to make this dynamic is to add an additional workflow action that "shows next/previous RepeatingGroup Number" for the "click on right/left arrow" actions. This will ensure that the numbers at the bottom of the page go up as far as is necessary. I've implemented this in the demo link that I put in the description if you want to take a look. 2. I tend to keep it simple and simply put a link in the various text elements within the job container. I also have a workflow action that is "go to page job" and "send data from current cell to page job" to help people navigate to the relevant job pages. Hope this helps! Alex

[@s.h306]

Hey! how did you do that spinner while the main repeating group was loading - Off topic I know but is there a video for that?

[@CranfordTech]

I've always found that to be the default - nothing special needed to get it working (at least for me) 🙂

[@MrNebukad64]

This is a great tutorial - thanks! However, I am missing one key element - you are defining 5 elements in the repeating group for that page numbers, because you say that you are having 85 job postings, which should be shown in 5 pages with a list of 20 each. Therefore you have 5 elements in the RG - which also means that you do not have to change the bottom numbers in the RG because you have only 85 jobs. However, the number of job posting will not be always showing 20 postings on 5 pages, as the number of job postings might be 200, if so, the number of pages would be 10. If that is the case you have to change the bottom page numbers while moving through the pages, which means there needs to be an algorithm showing the in- or decreasing number of pages within the repeating group of the 5 elements.

[@CranfordTech]

Thanks for the comment Sven and you are absolutely correct on the page numbers not being properly dynamic. I've implemented a fix for this that you can now see at the demo link in the description. I've basically added an additional workflow action that "shows next/previous RepeatingGroup Number" for the "click on right/left arrow" actions. This will ensure that the numbers at the bottom of the page go up as far as is necessary. Alex

[@MrNebukad64]

@@CranfordTech Wow. that was quick and excellent - thank you, really appreciated!

[@luisdiazvenero5054]

@@MrNebukad64 hello, can you share the solution?

[@abhineetagrawal9038]

@@CranfordTech Hi i cannot see the demo link for the fix for changing the numbers in the repeating group of page numbers

[@ericksousa5666]

@@CranfordTech Good job here! I was wondering the same.

[@ZatriX_ZA]

I wonder how the following use case be implemented: < 1 | 2 | 3 | ... | 11 | 12 | 13 > that will keep the width of the pagination fixed regardless of how many pages there are

[@netxyz00]

I can't find the demo editor link.

[@CranfordTech]

I'm afraid the app that had the demo I'd no longer live - sorry!

[@strelok2613]

Thanks=)

[@CranfordTech]

Glad you liked it!