Pagination in Flask: Split Your Data Into Pages

what is going on guys welcome back in this video today we're going to learn how to easily Implement pagination in flask so let us get right into [Music] it all right so here's a quick preview up front this is what pagination looks like this is what we're going to implement in flask today the idea is that we have a lot of items that we want to display for example in this case 100 different numbers and instead of just listing all of them so that we have to constantly scroll through them we can split them up into multiple pages so in this case I have 10 different pages and I can use this next button and also the previous button here to explore the different pages you can see page six page 7 8 9 10 we have these 100 different items and we have 10 per page and that is something that you often times see when you have large databases large tables data frames uh that you want to display on your website but you don't want to display it uh just all in a row so that you have to constantly keep scrolling you want to have usually pagination combined maybe with a search function so this is what we're going to implement today so the first thing that we need to do is we need to make sure that we have flask installed on our system for this we're going to open up a terminal a command line and we're going to type pip or pip 3 install flask like this and once flask is installed we can just start a simple new flask application by creating an app.py file and importing let me just zoom in a little bit here and importing from flask flask with a capital f that is for the application itself then we also need render template so that we can render an HTML file and we need request because request allows us to access the URL parameters in our case we're going to have uh the page which is going to be relevant so we need to get it using request uh and then we're going to just create a simple application with flask and the parameter uncore uncore name uncore uncore and then we're going to have a single route here so we're just going to say app route the route is going to be slash so home or the default route uh the name of the function is going to be index and what we want to do here now is we want to get the parameters from the URL that tell us which page we're looking for now one thing that's important here I'm going to add a pass here for now one thing that's important here is we need some data and since the focus of this video here is not on an actual uh flask application I just want to show you the concept of pagination we're going to use just a couple of numbers however in reality you would load the data from a CSV file from a database from an EXO file from ad Json file or something else um and you would not just use numbers but for the sake of Simplicity here just to illustrate the concept we're going to use numbers and we're going to create a list items here with capital letters because it's going to be a constant list and it's just going to be the list of the function result of range from one to 101 so we specify 101 because that does not include 101 so we have 1 2 3 and so on up until 100 that's the idea here and now we want to display the items now what we can do here without pagination is we can create a directory here templates we can specify here that template folder is templates and we can just go ahead and say um return render template then index HTML we need to create this file um and and then we can say just uh items is equal to items like this so that would be no pagination and of course we can complete this by saying if uncore name uncore equals and then Main and then we can just say app. [Music] run debug equals true and then we also need an index HTML file here so index.html like this let's call it my pagination app what I can do here is I can create a list so I can say I want to have an unordered list and I want to have multiple list items and the list items should be all the items this is again no pagination yet so I can say here four item in items using the usual uh Ginger templating engine so I can just do it like this and then I can have at the end here the end for um and in between here I can now specify that for each item I want to have uh come on for each item okay it doesn't recognize the templating doesn't matter uh for each item I want to have a list item and uh I just want to display the item so that would work hopefully let's visit the endpoint there you go and this is again no pagination with all the values listed in a row this is not what we want we want to have pagination so what we're going to do now is we're going to every time when we go to to index we're going to calculate uh which or we're going to get from the uh URL parameters which page we actually want to go to and then we're going to split the data into pages so we're going to say here the page that we're interested in is request so this is why we imported request arguments so the URL arguments get and we're interested in the argument page and the default if we don't get it is going to be one so we say okay get me the value of page page if there is no value I want to have the value one this is going to be the default the first page and the type of this data is int actually the type int not the string int so that is just saying that we're expecting an integer this is going to automatically typ cast it so per page we want to display 10 items now you can also change that if you want to but we're going to display here per page 10 items and we're going to say that the start is going to be dependent of the page so depending on what page we're at we're going to say page minus one times per page so we want to know okay what's the starting point if if it's the first page we want to subtract one to make it zero and we have the zeroth uh item which is the first item so index zero um and if we have one we want to have or if we have two we want to have one we go 10 instances because we have 10 per page so we start at index 10 that's the idea of the start here and the end is just going to be the start plus per page to go to the end of the page that's the idea and the total Pages or Pages the total pages is going to be equal to just the length so we're going to say Here length uh or not the length the length divided by per page so the length of the items plus per page minus one divided floor divided by per page that's the basic idea here um and why do we need all this information we need this information first of all to decide which items we want to display so we're going to say items uncore on page is going to be equal to items and we're now going to use start and end to do the slicing so we only get the items that we're interested in and the important thing is we also want to transmit the total pages so that we know when to stop uh providing the next button so what we're going to do now here is we're going to say uh items on page is going to be equal to and now I'm blocking this with my camera it's going to be equal to items on page and then um what was the other one the other one was total pages is equal to Total Pages now we can use this information in our index HTML file uh to provide pagination so this here is going to stay the same the only difference is that uh we're going to now say uh instead of items we're going to say items on page and I think that already this should uh result if I run this if I'm not mistaken I think this should already result in only 10 items being displayed because uh the default is one there you go so we only have the first page so to say now I can of course go ahead and provide the URL parameters manually but we're going to have buttons for that so what we want to do here is we want to add buttons for previous and next and also we want to have some text displaying the page number so what we're going to do here now is we're going to use bracket percent if we want to say if the page and do we need to also provide the page yeah we need to also provide the page so we need to also say page equals page so that we can work with this value in the HTML file so if the page is greater than one we want to display a previous button because of course it doesn't make sense to display previous if you are at page one because there is no page before page one so we're going to say if the page is larger than one so if we're at least at page two we're going to display the following anchor it's going to point to URL 4 we want to go to index and um the page that we want to use is going to be page minus one so this basically specifies a URL parameter so this is going to uh append to our URL I'm going to use a comment here to show this actually this is HTML so I got to use this comment here um if my page is my page.com SL this is going to say uh or just my page.com it is going to append here question mark page equals and then the value 1 2 3 and so on this is what it basically does so it goes to index but it adds this uh URL argument and this is going to give us now the URL for this particular page um and this is going to have the text previous now we can copy this and we're going to say and we need to add an end if here first we're going to say now that actually we can copy this whole thing we're going to say if the page is less than total Pages then we're going to display page + one and we're going to call it next and then in between we want to have a span which is always going to be visible and this span is going to say page page of total pages and that should actually result in pagination uh the problem is we have for some reason here uh curly brackets where is that uh here because we don't need this and here so let's run this again there you go we can go next next next previous previous next next next next next and here I don't have a next button anymore and you can see look at the URL up here we have page 10 page 98 and so on so this is how you implement pagination in flask so that's it for today's video I hope you enjoyed it and hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this Channel and hit the notification Bell to not it's a single future video for free other than that thank you much for watching see you in the next video and bye

Channel: NeuralNine

Views: 5,322

Keywords: python, flask, pagination, flask python, flask pagination, html, wep app, pages

Id: U18hO1ngZEQ

Length: 11min 51sec (711 seconds)

Published: Mon Nov 06 2023