Django Pagination

hello everyone this is kenneth brennan from cambridgetech and welcome back to the channel so in today's tutorial we are going to learn about pagination so what i have over here is i have some data entry in my database and they are more than exactly what we see over here this is only three entries but you can see over here we have some buttons over here and when i click on let's say one i want to see the entries in page number one then i can click on two to see the entries in page number two three to see the entries in page number three i can equally also press preview so currently we are at page number three so when i press previous we are going to get into page number two so as you can see we are in page number two and the next previous is going to send us to page number one so this is pagination so in order to do this obviously you need to have some understanding of jungle and i do have a number of courses over here you can check it up on this channel to get started with jungle now what we are going to do today is we are going to pick up this particular project okay and we are going to build that pagination functionality on top of it so this is a video that actually builds this application and i did some modifications into it in order to get the pagination functionality and what i have over here is i have this github repo so i put all my codes on github so we are going to clone this so that we can straight away work with it so if you're excited just as i am kindly subscribe to this channel if you haven't and click on the notification button so that anytime i release a video you'll be really notified okay so let's get started okay so what i have over here is i just have vs code opened and we are going to clone that project i spoke about earlier on so i'm going to go into my browser and i'll leave this link in the description so this is my github repo so github dot com forward slash camera tech and when you click on repository you have this project showing up provide so this is a jungle search project so i'll click on this and all that i need is this link over here so i'll just come in here and do a ctrl c and copy it and once i come in here i need to come and click on the explorer then i have this button away so i want to clone a repository and all that i need to do is to paste the link i just copied and i'll press enter so it's going to ask me where do i want to put this and i want it on my desktop and i'll just select repository location so this is going to take some few seconds and it says would you like to open the cloned repository and i'm going to say yes open so it's going to open in this window and we can start working with it over here okay so what i can now do is i cannot close this and when i open this terminal let's try running this program and see so i'll do python manage dot pi run server and the projects has started running so i can click on ctrl and click on this link and here we are so this is original project and we are going to do some modification to it and work our way with the pagination so i'm going to go back into vs code so let me just give you a recap for those who have already watched that video you definitely know what i did but for newcomers there's something you can just do with your projects ongoing project or you can just clone this and also work around it so the name of the project is the search projects obviously as you can see over here then we have the dashboard so that that's what is the app and as you can see we have views of pymodo.pi and everything showing up over here what we did over here was we just did a multi-parameter search for what we had over there and basically this application maybe you can search a name kenneth and it will just filter through what we have over here all right so now this is not what we want let's do some few modifications so right let's go into the template and the first thing i would want to do let's go into partials and now.html because i want to get rid of this search menu over there so i'll just come inside of nav.html and get rid of this so i'll do a ctrl s and i think we are in business so that is gone then we need to also come inside of um our views dot pi so inside of our views of pi this time we are not doing this query so we don't need this and basically we also don't need um the things over here we are going to write new logic over here so all that i need okay because now that we have this this way when i come back to camera refresh is going to clear everything up because you don't have any query over here so i'm just going to say data is equal to then i can have access to this data modulo right us do data dot objects dot or then i can have in a context dictionary so having context and my key value pair i'm gonna have data and data like this okay and i'll just pass this up into the return value over here and let me just show you because i'm using data in my original project so when you come to index consider you are looping through for data in data so clearly everything is going to work over here so now when i come back and come and refresh now we have this so it is at this point that you want the pagination to work out so what i'm going to do i'm just going to search for jungle pagination we are going to go to this first link over here and this is everything we need as far as the jungle documentation is concerned so everything or every bit of information we need is over here so i'm going to break it down and demonstrate to you as we move along then also i'd also want to get something let's go to getbootstrap.com and we need to get that pagination interface i displayed over there so let's click on all releases and let me check the bootstrap version we are using over here so let me go into our base.html and with the cdn we have over here we are using um the version 4.6 okay so let's come back and click on version 4.6 and let's just type in pagination so i'll click on this link and here we are okay so i think this is the one i used so i'll copy this and i'll come into my let me close this and this so inside of index.html so what i'm going to do is i'm going to have um a container class over here so inside of this container class i'm going to have a row and i'm going to have a call md let me do md4 over here then let me put up imagine y so margin to the top and bottom of five and let me come back here and copy this particular one i'll come in here and paste this over here so i'll save this and if i'm to come back here and come and refresh this is what i have okay so let me put it a little bit in the middle and i just have to come in here and do an offset md lasso 3 all right now these are things i do as far as bootstrap is concerned very soon i'll release a video on the new version of bootstrap so here we are good let me just put out um let's see a text over here so inside of this paragraph let's say i have page three out of three now this is obviously something static and we are going to see how we can make it dynamic okay so this has to come here i'll cut this and let me try and put this over here and see okay so i think this is okay okay so this link is disabled okay so let's work on this and we just have to come to the previous where we have and just take away this disabled class so that it becomes something we can click on it okay and let me see okay so i think we need to add in another class so this is this is supposed to be an href okay so there's no href over here it's supposed to be an href and for now let's leave it blank like this so when i refresh and come back here now this a hyperlink we can click on all right so now let's work with this pagination and when we come into the documentation there are some few inputs we need to run over here so let's go into our views of pi right inside of my views.pi what i'm going to do is i'm going to run some imports over here so i'm going to say from jungle dot co dot paginator i want to import a paginator class over here and this by unita is capital p so all that i need to do is to creating or instantiate the class so i'll creating an object and i'll do paginator and i'll pass in the data i have over here originally this data is fetching everything but this time around i'm going to pass in another attribute over here so as you can see it says the object list that's the first parameter and the second parameterize a page so how many objects list do i need per page how many entries do i once per page and let me say three so this means originally this page has about 9 11 20 items over here depending on the kind of data set you're working on but what i want based on what i've implemented over here is to have three entries per page so that i'll click on the next to send it to the next page so right over here what then we can now do is we can pass in the page over here so instead of just data i'm going to change this to page so when i save this now page is being passed in the context unfortunately when i come back to come and refresh everything is going to disappear because based on the logic we have in our index dot html we have data and note page so i can now see from for data in page let me do page over here and when i come to come and refresh now we seem to oh we are supposed to see something over here but we are not seeing it and i want to go step by step because this is very interesting so now remember when we were typing um what we had over here it was expecting us to let me see if it is going to pop this up it was expecting to see an object list okay but we decided to give it a different name so what we then need to do is to come in here and say for data in page dot objects unless call list and this is going to make it work okay so when i come back here to come and refresh now you have this data show in apple we are supposed to see three entries all right so now let's continue what i cannot do is i can now do something interesting over here i need to come and now call in the page list so i have a page list over here and i'll do request dots gets dots and what do i want to get i want to get a page so this is going to be a variable we are going to pass in at some stage then let's overwrite the page we have over here then all that i can do all that we need is page dots gets page so you're going to call this.getpage and all that we need to pass in is a page list that we are getting from a get request from our browser so if we do this and come back into our browser and come and refresh and see that we have only three entries over here all right so now we are done with something now this is exactly what i did so basically this is what i imported okay and this was some kind of arbitrary data in the database and the paginator has been instantiated he used a variable or they use a variable p and everything over here is exactly what you are looking at so now you can get the page counts the page numbers the page range there are a lot of methods in there that we can use now we are going to look at the ones that are relevant to what we are trying to do so in order to proceed the first thing i wanted to look at is what we call the page number okay so or the number method and the relevance of what you want to do as far as that is concerned is to look at these numbers changing here and there okay now what i have over here if i'm to do a foreslash and i do a question mark and i bring in page is equal to two and look at the entries over here we have kenneth brunny kwame and chrome and um when i do a question mark page is equal to 2 and press enter you can see that the entries over here has changed when i do same and do page is equal to 3 and press enter the entries has changed so this is changing based on the request that we are passing in here and that's exactly what we have over here so this page is what i had in over there and once you pass that into the page list the page list is going to return the number of items on that page good so let's look at some few things over here now with this numbers we want to see if you're on page one if you're on page two and things of that sort so what i can do over here is i'll come into my index.html and over here what i can do is i can do [Music] page dots number and this is going to return the number on which we are on okay or the number where we are so clearly we are now on page three okay so when i hit on this we don't seem to see anything over it there's a first number over here that's going to change actually so when i do pages equal to one now you can see that this has changed to one when i do page it's equal to two you can see that it has changed to two so that's with the um the number method that we can call on that particular object we created and that's what we have over here the pages what we are getting from the page list so if you do pages equal to one and you want to call the number it gets it for us now you can do um the two thundermans so this is going to be like the total number of pages we have so for the total number of pages let's come in here and for that we just have to do i mean it's very simple we have to do page dots paginator dots num underscore page so this is going to give us uh num pages sorry so this is going to give us the total number of pages we have in our system so when i refresh obviously i'm not going to see any change over here because the number of pages is three okay and initially i typed in three over here but what we have over here is now one [Music] we cannot have three out of three and this is quite dynamic all right so now let's look at how we can add in the links and when we click on this um something should happen so that's also very simple so in order to do that what i'm going to do is i'm going to come in here and this is supposed to be the previous link okay now what i'm going to do is going to be very simple but please pay attention so i'm going to come in here and just over here i'm going to bring a false statement over here or sorry an if statement so i'll say if the page dot has previous so underscore period so there's a previous method in here and i think um a demonstration was made over here so this is a previous method so what i'm trying to say is if it has a previous page then show this link okay else you don't have to show it so i'm going to end my if over here so and if so if there's a previous link you show this else you don't have to show it and what i need over here is a link to that previous page if there's indeed a previous page so that's what i'm going to do i'm going to put out the link and as usual this is going to be the url and i need to type in the url name i give it over here and let me just come in here and go into urls.pi and the name i gave it was index so i'll copy this come in here into my html and bring index over here but i'm not quite done i now need to bring in the question mark like this okay and the page is equal to this that's i was typing over here i need not to type it over here okay i want it to reflect once i click on this so that's exactly what you have over here and we need to link it up with the previous page so that's going to be page dots previous underscore page underscore num so that's going to be the previous page or like the previous page number number so that's going to be the previous page number so when i save this obviously because of my extension you can see that it has been formatted over here so when i refresh this you don't seem to have any problem over it now when i click on this you can see that it has not changed we were previously at three we changed to two and when i click on it again we are now back at one now because there is no previous page after or before one the link is not showing up and that's exactly what we wanted because if there's no previous page there's no point showing that link and that's exactly what this was implementing so if it has a previous page you show it if not then you don't have to show it so let's do the same thing over here so for the next page actually so i'm going to say if page dot has underscore next and i'm going to end it over here so i'll do end if like this and what i need is similar to what i did so i'm just going to put out the url over here and i'm going to have the index and right over here i'll do the question mark and i'll bring in page it's equal to double quotation i mean double kelly brackets and just as i did over here i'm going to see page dots next underscore page and that's called number all right so this is similar to what you have right so page dot previous underscore page underscore number and then next is next underscore page underscore number so when i come back to comment refresh now next is showing up right when i click on this you can see that the previous now comes because you're on page two when i click on next again we're on page three and p3 is the last page so clearly you see that there's no next page after page three so we don't have anything and as you can see what we have over here is also showing the kind of all the pitch on which we are and the data keeps changing as well now the next thing we want to do is to lo i mean so far what we have in the middle is quite static okay nothing changes now i want to if we're on page two we want to see this highlighted on page two if you're on page one for instance as we have want to see this uh primary color on this page all right so let's quickly look at that as well so back into our vs code and this is what we have over here so i'm going to run um some loop over here but before then let's just clear what we have over here i think we need okay so the current page has an active class over here so that's what we want so let's just clear this for now that's with the page one and let me put up a loop over here so i'm going to say for and i'm going to call or creating a new variable so for numpage in page dots paginator dots page range so there's a page range method over here and what i want to do is i would want to end the fall look over here before i continue to anything so i'll do end for okay then i'll come in here and i'll add in a class so what is class sorry i'll add in another logic so i'm going to say if the page dots number and we've already seen page.number page.number is what we use to call in the number on which we are on okay so if the page dot number is equal to the num page we just created over here based on this loop then we want to show this okay so let me also end the if statement over here and i'll do end if okay but i just want to show number two because assistance when i save this okay and come back here we are going to run into some problems over here and it's obviously because of the extension i have over here so this has been joined and it's looking crooked so um if you don't or if you are not using this extension i think you are good to go but with my i just need to break it so that everything looks organized okay then i think over here so i need to break it so that i don't run into that problem okay so that's being said i mean that being done now we are cool so now when i click on previous view on page two everything is showing true nothing changes okay everything is showing too and that's because we are just displaying two over there but that's not what we want to display what we want to display now as far as this number is consent is we want to have what we have here as the num page so when i save this and come back here and come and refresh now you see that we on page one so this one is highlighted when i click on next you're on page two and now two is highlighted when i click on next your own page three three is highlighted now clearly you can see that there's this three showing up all the time and that's because we have it over here so this three is what is showing all the time so let me just get rid of this and now when i save this and come back to come and refresh now you're on page three so clearly you see three over here you're on page two so two is highlighted and you're on page one one is highlighted but i want to have the other pages also showing all right so what i also want to do is i also have to change the link over here because you also want a situation where when we click on this link it's supposed to send us to that particular page so in order to do so i just have to come in here and repeat i mean pretty much what i did so url and i'll bring my index over here and outside this i'll bring in my question mark and page is equal to and over here is going to be equal to the num page okay so the num underscore sorry underscore page okay so this is good and if i'm to refresh there's no not a dead link when i click on it it's taking me to that particular page so now let's bring the other pages next to it and that's very simple all that we need to do is to just copy this okay so i'll do a ctrl c over here and before we end it i just want to bring in an else statement over here so i'll do an else we paste this over here then all that we need to do is to take off the active class so now if we are not on the current page this should just display and just show me the number so when i come back to come and refresh now you can see that we have one two three showing okay now we're on page two so you can see that page two is now the active or the active class is on page two so it is highlighted now when i click on previous we come to page one okay when i click on three it takes me to the third page and you can check over here the url also change alongside and when i click on page two it works all the links are working and obviously when i click on previous we worked on this um i mean the first things we worked on was this so clearly you can see that everything is working away and this with the pagination all right so this is going to be the end of this video if you find this video interesting and very useful then i'll urge you to kindly subscribe to my channel and and look out for more educative content of this kind thank you very much and bye

Channel: KenBroTech

Views: 298

Keywords: django, django pagination, how to make simple django paginator pagination, next and previous page link, django web application, import Paginator, next link, previous link, make different pages

Id: YBjD1rU3_aE

Length: 28min 20sec (1700 seconds)

Published: Wed Nov 03 2021