How To Create Pagination | Bubble.io Tutorial

how's it going guys in today's video I'm going to show you two ways of how to use pagination for repeating groups bubble.io so let's get into it so first things first we need some data right so I got this CSV file with 100 random customers uh if you care to try it out for yourself I'm going to leave a link in the description so you can download this file U so let's go to Bubble uh let's go to data and I have this data type called customer right their country first name last name I actually imported the data already but uh simply go here to upload if you do new upload select the data type then um pick a file to upload there's going to be map Fields right um let's just I'm going to show you so we upload this file happen already and now we have to just map those fields right it did automatically and then validate the data and then upload right simple as that go back to um now go to plugins and download this plugin toolbox it's a free uh free plugin um so many things you can do with it you know JavaScript list of numbers Expressions stuff like that go back to design and now we have this page right delete this let's grab a repeating group group ping group let's set the the data type on top of content to customer do search for customers U simple as that and we have 100 customers in our database so let's set the specific page to 10 customers let's grab some before we do that change your layout grab some text and let's this is going to be current sales customer first name contrl c contrl v it's going to be their last name and this is going to be their country their country so we have that right so the first way is to um let's grab some let's grab a group uh layout's going to be this and let's grab some material icon it's going to be arrow to the right the left contrl C control V just copy it let's do another way to the right and then let's grab some text and this is going to be page and add damic data right repeating groups customer page number right so it be basically like page one now to make this um nice and simple click on this group and just change the layout this is not visible on page load and condition is when repeating groups customers um list of customers count is more than 10 then then we're going to show it right because it wouldn't make sense if this was visible and we had like five customers right let's make this visible awesome now um let's do the same thing here let's set a condition when again repeating groups customers list of customers oh no repeating groups customers is on the first page then this element is not visible right just copy this condition paste it on here is on the last page and the same thing happens right so we we have this condition now how to display the next page right uh I would say this approach is more for you know if you don't have like thousands and thousands of Records you have you know couple dozen maybe 100 even so let's set up the condition so let's click on this arrow and basically what we'll do is click here element actions show next right and this is going to be repeating groups customer now let's make it on the second Arrow be here element actions show previous again repeating group customers is very simple now let's just reload the page as you can see we have the first page page one page two page three five six seven eight nine and 10 boom it's not visible right if there was less um uh less data then this wouldn't show at all let me see what I have here let's do well let's keep it as it is now and the second way is let's grab list of numbers so from this plugin the toolbox and this is going to appear so let's grab list of numbers put it somewhere on the page it's not going to be visible in page load and start numberb is going to be one increment is going to be one is as well and the length is repeating groups list of customers count and divide it by number of those cells right so now we have 10 cells so we're going to divide it by 10 it's going to give us 10 pages right if we have 100 records divided by 10 10 pages simple let's grab another repeating group and put it below that and this is going to be our pages right so let's set the row to one columns to 10 let's set um the content to number right and let's grab some text put it in here and this is going to be current cells number and before we start doing anything else uh let's just set the repeating group uh this repeating group of numbers let's just set it to list a list right so this is exactly list of numbers a right um as a data source so it's not where it's pulling the numbers from right and then I mean this the same thing right uh let's grab the material icon this is going to be Arrow change them to the right um the right and again you you can set the condition when it's on the first page um then it's not visible on the last page Etc but for this when current celles number is um clicked and we got to show the group right so go to element action go to page and this is going to be repeating group's customers current sales number right that's uh let's add another one go to page it's going to be repeating groups current sales number right um so let's let's try it out right so now we have Amy Downs four now we have Caitlyn if we go back Amy very simple very simple if we were to just quickly set it to like five and set this just so you know like how it works set this uh go to yeah so go to elements action and show next and this is going to be uh repeating groups customer and the same thing goes for show next beting groups number right I go to next this is the next page right at Tracy Virginia Gina very simple so yeah uh I hope you enjoyed this guys um if you want to try it out for yourself like I said the link in the description for the CSV file is going to be in the description other than that um comment subscribe follow if you like and I'll see you in the next one bye

Channel: Max Kubanek

Views: 653

Keywords: Pagination, Bubble.io, Bubble.io Tutorial, How to, How to create pagination, Pagination Bubble.io, No Code, Build software with no code, No code saas, No code Software, Repeating Group, Table, Bubble.io development, Tutorial, How to page, How to create pagination in Bubble.io, How to Bubble.io, Build software without code

Id: AWOaEkaOH-U

Length: 9min 58sec (598 seconds)

Published: Sat Mar 23 2024