Thank you to everyone who's left a comment on one of our Bubble Table Element videos. And we've had a question and that is how can I add numbered pagination to the Bubble Table Element? Now you would need to check out a previous video to kind of 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 how do you add in a nice label just like this to your Bubble Table.

How to learn Bubble

But before I launch into that, if you're serious about learning Bubble, you need to check out a course, a program that we've got upcoming called the PNC Mastery Program. Go to planetnocode.com slash mastery to find out more and basically it's a unique opportunity that we've got coming up and it's well worth checking out and the time is running out to express your interest and sign up. We've also got over hundreds, over hundreds, because we've got hundreds of Bubble tutorial videos, many of which are exclusive to our members on our website.

Recap of Bubble Table Pagination

Let's dive into what I'm doing here. So in the... let's start here, let's start here. So 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.

Calculating the total number of pages

So 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 and that is my way of calculating how many pages I've got. And 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.

Calculating current page

So how do I get what page I'm currently on?.Now I was sort of scratching my head trying to work out a mathematical formula to do this and then I gave up and I thought I could just count it. Now 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 that. Anyway it stumped me so I just added the count and the way I did that was by going into workflow. And I'm going to skim over some of this, the details in that previous video about pagination with the Bubble table element.

But effectively, my next to my previous buttons have got two different workflows and they're based on conditions. Basically if they need to loop round 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. So the simplest example being this one here. And 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.

And then my page number is effectively another custom state of my page's 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. And so that's going to say I'm on page one, next page two goes up to two, next page three. Then on this one here, this is 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. Now, in order to make the 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. And so my start position is one and my page number is one. And 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. And I can show you even if there is kind of a little bit of mystery there, the maths checks out because look, I can go up, I can go down, and I can loop around. So that's how you do it.

Wrap up

There you have it, how to add in a page X of Y to the pagination for the table element in Bubble. And 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 because this is a bit of a messy work around, 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.