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.
Next Button Workflow
The simplest example is this one here. I'm saying my start position I add three, so that moves me on three records every time I click next. That's how I get my pagination. Then my page number is effectively another custom state of my pages custom state page number plus one. Remember for both of these, I'm not starting at zero - the default value is one, just keeping it simple for the maths. So that's going to say I'm on page one, next page two goes up to two, next page three.
Previous Button Workflow
On this one here, this is my basically my previous button in the simplest form, which is take three off the current position and then I just minus one off the page number. That's how I could go from page three to page two.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.