Pagination For Django - Django Wednesdays #18

what's going on guys john elder here from coding.com and in this video we're going to look at pagination for django and python all right guys like i said in this video we're going to look at pagination but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out cody.com we have dozens of courses with hundreds of videos to teach you to code use coupon code youtube1 to get 30 off membership it's all my personal videos and books 110 feet just 49 which is insanely cheap okay like i said in this video we're gonna look at pagination so we have the beginnings of a very basic pagination down here and we're gonna make this look nicer as we go along but in this video we're gonna get the basics here so we've got you can go to next page it says page two of three you can go to next you can go to previous you go to last you can go to first all the stuff for pagination and that's what we're gonna look at in this video so head back over to our code i'm using the sublime text editor and the get batch terminal as always and as always you can find a link to the code in the pin comment section below as well as a link to the playlist with all the other django wednesday videos so check those out if you haven't so far so okay what do we want to deal with let's look back at the website real quick we want to deal with our venues list so we've got a decent little list here now this is a small list usually when you're talking about pagination you have dozens hundreds thousands of pages you want to paginate through we've just got it looks like six here but that's enough to just sort of show you the mechanics of how to set this all up so let's head back over to our code and let's go to our views.pi and up at the top here we need to import some stuff uh let's go uh import pagination stuff that's the technical term for it stuff so we need to go from django.cor.paginator had gennator we need to import paginator and this paginator is uppercase this one is lowercase sort of keep that in mind so now you do this on each individual view you want to paginate so our specific page we want to paginate is the i think list venues view so let's come down here search venues show venues list venues and right now you'll see we've got this order by and i just showed you this a few videos ago to show you how to randomize the order that these are listed in so if we come back here and hit reload every time we do the order list is a little different so we probably don't want that for pagination we don't want the order of the things to be changing as we paginate through each page so we need to remove that so let me just come back here i'm going to copy this whole line and paste it a second time and i'm going to comment this out just so it's still in the code so if you need to reference how to order by random you can still look at that but for now i'm just going to take all this off and in fact we probably didn't even need to do that because we're not going to be using this at all anymore in just a second so i'm going to save this come back over here hit reload a couple of times okay so now it's not changing every time we hit reload like i said we're not going to be using this setup anymore so we really didn't have to do that but i don't know i thought i'd mention it anyway so okay how do we use this thing well it's actually not that hard there's really just a few moving parts here so let's uh set up pagination so i'm going to create a variable called p short for pagination and this one you call it anything you want but p makes sense because we're not going to be using it for much so i'll just call it p and this is going to be a paginator right and we're going to create a paginator instance and what do we want to paginate well we want to paginate all of this stuff right so i would just pass in here venue.objects.all and now we need to give it a second argument how many per page do we want to show and we've only got six so i'm gonna put two per page right you know that's not a lot normally you wouldn't want that you would put like 20 per page or something but we don't have 80 venues we only have six so i'm going to make this two venues per page just to show you how to do this so those are the two arguments this takes your call to your database your model we're calling the venue model now we can do this because up here at the top here we imported venue from our models and that of course is just we go to our models.pi file it's this venue model right here so all of these things name address zip code phone all the stuff right so okay let's come back down here to our list venue so we've set up our paginator now we need to keep track of the pages right so each time you click a link to go to the next page we need to sort of keep track of that right so i'm going to call this page and this is just going to be the request dot get dot get two gets and then we just want to pass in page and this request is this guy up here remember anytime somebody goes to a web page they're requesting that web page and they they want to get that web page right so we're get dot getting that page right so that's our page so now we put this all together and i'm going to create a new variable called venues you know before we call this venue list you know maybe we would call that venue list but i'm just going to call it venues and this is going to equal that p dot get underscore page and we want to pass in page so this p is our paginator this page is the request basically and okay so now we've got this venues variable we want to pass it into the page instead of the venue list or in addition to and i'll show you what i'm talking about in just a second so let's go venues colon venues so okay we've got we can actually remove this in a minute and i'll show you that but for now this is fine so let's go ahead and save this so now we've got this venues thing what exactly is all of this what's all this information getting passed so let's head over to our let's see templates events venue.html and this is our venues page it lists all the venues so down here i'm going to create a couple of line breaks and i'm just going to print out venues and let's just see what the heck this thing is so we can come back over here and hit reload and down here it says page one of three now that's sort of deceptive that's what it is but there's a whole lot of other stuff in this so i'm gonna make a little list on the page just to sort of show you what all comes with this so let's head back over here and i'm going to do a line break here and so we can go has previous and let me just sort of copy this guy and a line break like that and this is going to be venues dot has underscore previous so if we save this come back over here hit reload does it have previous false what does that mean well we're on page one so there isn't a previous page if we were on page three this would be true there would be previous pages that we could click to so that's how you can keep track of whether or not there are previous pages or not so pretty straightforward the next one is has next as you might expect and this is just venues dot has underscore next so let's save this and take a look at it so has next true why well we're on page one now right this is page one and we know there's three pages so there must be a next page and that says true so that's how you keep track if there's a next page so this keeps track of if there's a previous page this one keeps track of if there's a next page important things for pagination i think you'll agree so next let's see we've got the current page what is the current page that's just going to be venues dot number right i don't know current would make more sense to me but it's not number so let's head back over here hit reload current page one well we know that's true because we're on page one so that makes sense and then finally we can also look at number of pages and that's just going to be venues dot a little bit different this time paginator dot num underscore pages okay so all of these are just venues dot something venues dot something this one's venues dot paginator misspelled paginator paginator dot the thing so okay let's look at that this is probably gonna tell us three right number of pages three we know that because right up here it's page one of three so those are sort of the the things you can play around with and and these are all going to be useful for building out our pagination so okay that looks good now let's actually build out the html for the pagination and this is going to be a little complicated but not too bad so i'm just going to sort of put a horizontal line here and a couple more line breaks just to separate this because i want to leave this on the page for now just so you can kind of see it right so okay we need to do some logic so so let's go if and i'm just going to real quick here end my if because i always forget to do it otherwise so let's go if venues dot has underscore previous so if there is a previous then we want to be able to click back to that previous right so if there is let's go a her f equals and we're going to need a couple of these so i'll just paste these in here and to use pagination we we take the url and we stick a question mark at the end of it and we call page equal and let's set that equal to one and now i want to put little arrows pointing backwards and to do that we we can use some html we call we call the ampersand l-a-q-u-o and that's like that will be two little arrows like that so this will be the first this is a link to the very first page right page one we also want a link to whatever the previous one is so let's go page and you know here we set it equal to one now we want to set it equal to something else we need to figure out programmatically so we want the previous page well that's going to be venues dot previous underscore page underscore number and we didn't really talk about that up here because it's kind of hard to show it unless you have a previous page number but that's how you get the previous page numbers just venues.previous page number okay so this is going to point to uh let's say previous okay looks good so let's go ahead and save this and well if we come back here there won't actually be any different because we don't have a previous page yet we could maybe come up here and go page equals two now we see this first and previous if we click here boom it goes back to page one and there's nothing there you'll notice up here nothing has changed yet we're gonna have to make a change up there in a minute to fix that so okay not all that useful yet because we're not dealing with previous pages yet but that's how you do the previous pages now we also then let's just say page and then let's go venues dot what number are we currently on so we're gonna go page one of and let's go the total number which we know is venues dot paginator dot num underscore pages remember we looked at that up here the number of pages so in the middle of our pagination it'll say page six of eight or page 27 of 106 or page one of three in our case right so that's how we get that and now finally we need one more set of logic so let's go if and again i'm just going to really quickly here end my if so i don't forget so let's go if and inside of here we want venues dot has underscore next so if there's a next page we need to do something for that and again let's go a ref and we're going to want a couple of these so here let's go again question mark page equals and this is going to be venues.next underscore page underscore number so if we're on page one we want to go to page two the next page to get that we go next page number venues dot next page number right so okay and inside of here we just want it to say you know next or next page or something like that and then down here again we want question mark page equals and inside of here let's go venues dot paginator dot num underscore pages because again we want here to go let's say last and then we want those little arrows pointing right because we want to go to the last one towards the right right so that kind of looks like this these two arrows right so to do that with html we just go let's see ampersand r-a-q-u-o remember up here we went l-a-q-u-o for left arrows left arrow quotes i guess this is right arrow quotes i guess right so okay that looks good let's go ahead and save that and our if all right so let's head back over here and hit reload and see all right so here it says page one of three we could go to the next or we can go to the last so here now we have page two of three we wanna go back to the previous one we can we could go forward to the third one which is three and go back to the previous we can go to the last notice these two little arrows those are the raq and the laquo right and like say we could go now to the last and we could go to the first so we got some basic pagination and that's it and you notice when we click on one of these things like i click next up here it says question mark page three we go to the first one question mark page one right so that's how it keep it's keeping track with the request remember the the page request that we get did back in the view okay so that's cool it looks like it works but nothing up here is changing why is that well back in the day when we first set up this page we looped through this for venue in venue list which we go back to our views.pi file is this venue list well we're not using that anymore we're using everything through venues and even though it looks like when we passed in venues this stuff when we look through all of this let's see right here this like venues when we printed this to the screen it was just that brackety thing right here page two of three but it also has all of our objects stuff from the model as well and we can access it so to do that we come up here to the top and our original loop from way back when so for venue and venue list instead of venue list from now on we just want to deal with venues right so we can go ahead and save that like i said at the very beginning of this we don't even need that venue list anymore so now if we come back and hit reload boom page one it just has two things city park and area 41. if we go to the next page boom las vegas high school gym and downtown vegas nightclub we go to the next page boom fifth venue and my place and like everything we can click on these and you know go to the page or we can update you know where we can delete if we want i don't really want to but uh it all works now and now you can get rid of this stuff too you probably don't want it i was just putting it on there to kind of show you how this works but yeah very cool so in fact let's just really quickly come over to our page come down here to where we did all this stuff and i'm just gonna kind of do something like this to kind of get rid of it that's just an h sort of like an html comment that's how you do it this is an opening comment and a closing comment tag in html so if we go ahead and save this come back over here reload get all that stuff gets rid of there it's still in the source code if you want to view this page a view page source you can come down here and still see that stuff if you want to play with it so we'll leave it in there just for fun but yeah we got our pagination here now this doesn't look very cool right you're going to want something much better so if you go to getbootstrap click on docs come down here click on components they have their own pagination stuff so we want something like this that looks much better or something like this right so we'll look at that in the next video it's a little tricky to get this to work but you know we can now do that we've got the functionality now we just need to do the css and the bootstrap stuff to make this look like this and like i said we'll look at that in the next video but right now we're doing pretty good now why is this only two things showing there well that's because if you remember back in reviews.pi file when we set up this p our paginator we designated we wanted two things we could say three things right so we save this to three come back over here hit reload now there's three things now our pagination updates there's only two pages because we only have six venues right we could change it to one per page if we wanted to be really crazy so change that to one come back over here it reload boom now it's one per page and now our pages is two of six because there's six pages because we have six venues and we're doing one per page and we can paginate three four five you know what's up here page equals five you know six very cool now we go all the way back to the first we go all the way to the last previous next i don't know why i put lowercase n for next let's update that uh venues come down here there we go that looks probably better oh yeah so that's pagination seems a lot more complicated than it really is there's really not a whole lot to it and pretty cool so that's all for this video if you like to be sure to smash the like button below and subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where you can use coupon code youtube1 to get 30 off memberships you pay just 49 to access all my courses over 47 courses hundreds of videos in the pds of all invest selling coding books join over 150 thousand students learn to code just like you my name is john elder from cody.com and i'll see you in the next video

Channel: Codemy.com

Views: 5,446

Keywords: django pagination example, django pagination function based views, django pagination queryset, django pagination last page, Django pagination, django python pagination, django pagination html, django pagination tutorial, django pagination how to, django pagination bootstrap, codemy.com, john elder, john elder django, django tutorial #18, codemy django, django pagination class, django rest pagination, page results django, django pagination, pagination in django

Id: N-PB-HMFmdo

Length: 18min 53sec (1133 seconds)

Published: Wed Jun 09 2021