Pagination for Repeating Groups - Bubble Tutorial

Подписаться 2,6 тыс.

Просмотров 19 тыс.

50% 1

Be the first to hear about our latest tutorials, plugin releases, updates and more: www.cranfordtech.com/newsletter
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 me for Bubble Consulting/Freelancing
www.cranfordtech.com/agency
💼 NoCode Job Board Template:
bubble.io/template/modern-job...
🎨 Check out our other Templates and Plugins:
bubble.io/contributor/cranfor...
📧 Contact: alex@cranfordtech.com
🤑 Get $15 off your first Bubble plan
bubble.io/?ref=jq28ggah

Опубликовано:

3 дек 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 46

@ericksousa5666 21 день назад

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

@CranfordTech 21 день назад

Great to hear! Thanks for the kind words

@vera.africa 5 месяцев назад

This tutorial is clear and helpful, thanks a bunch!

@CranfordTech 5 месяцев назад

Glad it was helpful!

@shishirkarki7971 2 месяца назад

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

@CranfordTech 2 месяца назад

Glad it was helpful! 🙂

@user-gu2rg9tq4l 2 месяца назад

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

@CranfordTech 2 месяца назад

Great to hear!

@Harrisk101MC Год назад

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

@CranfordTech Год назад

Glad it was helpful!

@kipyegonkurgat5615 Год назад

Crystal Clear. Thanks

@LeraMulina Год назад

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

@CranfordTech Год назад

Thank you for the kind words!

@fheralanis 3 месяца назад

Thanks for the help !!

@CranfordTech 3 месяца назад

No problem 🙂

@Steve-js7bp Год назад

very good!

@consiliumapp Год назад

Thanks a lot!!!! Great tutorial!

@CranfordTech Год назад

Glad you liked it!

@hamidkaramyar8695 2 года назад

Thanks for a great tutorial.

@CranfordTech 2 года назад

No problem Hamid! Glad it was helpful

@juliusforsterofficial Год назад

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

@paulNocode 2 года назад

Thank you..... 🤗🤗🤗

@CranfordTech 2 года назад

No problem!

@strelok2613 2 года назад

Thanks=)

@CranfordTech 2 года назад

Glad you liked it!

@ZatriX_ZA 2 года назад

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

@MrNebukad64 2 года назад

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 2 года назад

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 2 года назад

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

@luisdiazvenero5054 2 года назад

@@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 21 день назад

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

@wdriscoll90 2 года назад

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 2 года назад

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

@AhmedKhodir-novyPro 2 года назад

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 2 года назад

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 nocodebuilds@gmail.com) I'm happy to take a look!