Bubble.io Table Element Pagination with Numbers

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.