Bubble.io Table Element Pagination with Numbers
In this Bubble tutorial we expand upon our last video tutorial explaining how to add pagination to the Bubble table element. This Bubble tutorial demonstrates how to add a number for the current page and total number of pages.
Unlock table pagination secrets: Learn how to add numbered pagination to your Bubble table element with this must-watch tutorial!
Master Bubble table tricks: Discover the easy way to implement "Page X of Y" labels in your custom states for seamless table navigation.
Level up your Bubble skills: Don't miss out on our exclusive PNC Mastery Program - elevate your Bubble app development game today!
Adding Numbered Pagination to Bubble Table Element
Thank you to everyone who's left a comment on one of our Bubble table element videos. We've had a question about how to add numbered pagination to the Bubble table element. You would need to check out a previous video to catch up to this point because I go through the details of how to use custom states to add pagination to the Bubble table element. This video is about how to add a nice label just like this to your Bubble table.
PNC Mastery Program
Before I launch into that, if you're serious about learning Bubble, you need to check out a course we've got upcoming called the PNC Mastery Program. Go to planetnocode.com/mastery to find out more. It's a unique opportunity that we've got coming up and it's well worth checking out. Time is running out to express your interest and sign up. We've also got hundreds of Bubble tutorial videos, many of which are exclusive to our members on our website, so that's another reason to check out planetnocode.com.
Calculating Total Number of Pages
Let's dive into what I'm doing here. To work out the total number of pages, remember I have a table and it is limited to three rows. That's why the number three is going to come up several times in this Bubble tutorial video. I do a search of all my contacts, do the count, divide by three, and then ceiling that basically rounds up to the next whole number. That is my way of calculating how many pages I've got. As you can see from my demo, I've got one, two, three, and then I loop back round to page one again. So that's how I get the second part of the page x of y - that's how I get the y.
Determining Current Page
How do I get what page I'm currently on? I was scratching my head trying to work out a mathematical formula to do this, and then I gave up and thought I could just count it. If you think you could do a formula, I think if you divide by the right number, maybe use modulo, I think you'd get there. Anyway, it stumped me, so I just added the count.
Implementing Pagination Workflows
The way I did that was by going into workflow. I'm going to skim over some of the details in that previous video about pagination with the Bubble table element, but effectively my next and previous buttons have got two different workflows. They're based on conditions - basically if they need to loop round to the table and start at like point one or point zero again, or whether they're simply adding or subtracting to the position in the pagination that we're in.
Circular Looping Pagination
In order to make it loop round to be like a circular looping pagination, I have to have these other workflows in place. This one is effectively saying go back to the start, so my start position is one and my page number is one. Then this one is also saying go back to the start because we've arrived at the first page, and so that is also setting the start position to one and the page number is one.
Conclusion
I can show you even if there is kind of a little bit of mystery there, the math checks out because look, I can go up, I can go down, and I can loop around. So that's how you do it. There you have it - how to add in a page x of y to the pagination for the table element in Bubble. I really hope that Bubble releases some of the additional data sources or features that we've grown used to with repeating groups and I hope they add it into tables. This is a bit of a messy workaround, certainly using more workload units than you would probably end up using if you just built this with a repeating group. But then again, the table element makes it nice and quick to lay out data in a very attractive way.
Ready to Transform Your App Idea into Reality?
Access 3 courses, 400+ tutorials, and a vibrant community to support every step of your app-building journey.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 400+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Valued at $80
Valued at $85
Valued at $30
Valued at $110
Valued at $45
14-Day Money-Back Guarantee
We’re confident this bundle will transform your app development journey. But if you’re not satisfied within 14 days, we’ll refund your full investment—no questions asked.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
Not at all. Our courses are designed for beginners and guide you step-by-step in using Bubble to build powerful web apps—no coding required.
Forever. You’ll get lifetime access, so you can learn at your own pace and revisit materials anytime.
Our supportive community is here to help. Ask questions, get feedback, and learn from fellow no-coders who’ve been where you are now.
Absolutely. If you’re not satisfied within 14 days, just reach out, and we’ll issue a full refund. We stand by the value of our bundle.
Yes, this is a special limited-time offer. The regular price is $350, so take advantage of the discount while it lasts!