jQuery Tutorial - Pagination

in this video I'm going to be demonstrating how to implement pagination with jQuery so you can see right now we're just playing four on the page and you can navigate to another page and you can also use the arrows to navigate back and forth and it doesn't reload the page such as a easy way to implement that using jQuery a few prerequisites you'll need bootstrap if you want to follow along exactly like in the tutorial you can head over to get bootstrap comm hit getting started and then basic template or examples and then here in the examples of the one I'm using is this first one here the starter template and then you're also going to need jQuery obviously if you search the jQuery CDN you can get mapped up really quick you can just click the first one here and hit uncompressed and then copy that script and place it in your HTML so I'll just sort of really quick what mine looks like really simple I got the bootstrap and then here's the starter template and then here is my jQuery script so just the basic template so what I usually always recommend when you want to test these files you want to just insert a script to make sure that jQuery is mapped up so I'll just say body you know say hide right in this little dish and so if this is working if jquery is mapped up then the entire body should be invisible just like that so if that doesn't work for you you may need to search your HTML maybe it's not inserted correctly you also want to enable your your browser developer tools and then go to the console you may get an error message here if you're not properly mapped up so I'll just go back and move this and then it should come back so the first thing I want to do is add the stuff that I'm going to use the pet page a nation for so I'll just go ahead and hard-code that into the HTML and shouldn't take long I'll show you it looks like I'll just create a new div here at the bottom in the body and we'll have class list group and then pass in an inker with let's leave that like that for right now and then class will be list group item active and then side there pass an H for class list group item heading I'll say title one and then pass in a paragraph woops this would be list group I don't text then I'll just enter some text in here so let me put more than that let's do that should be good right and then let me just see what that looks like alright so you should have that now one thing I'm going to show you if you click on it it adds a little hash mark here the little whatever you want to call that to the URL there's easy way to get rid of this and all you do is right here instead of that you can type in JavaScript void parenthesis and then a 0 and so now you'll notice once you click it nothing gets added to the URL so I like to add that to all my links that point to nothing so the next thing you want to do is copy that and paste it 10 more times okay and then I'm just going to go through and number these each set on eleven ten then once you're done with that you just want to double-check that you have exactly 11 boxes and then the next thing I want to add is this little feature from beach trap just go down click let's the pagination you can grab this little sample they have here so I'll just copy this and I'm going to paste it at the top just so it's easier to see and then you should have this little box right here now you'll notice as it is right now whenever you click on a number it becomes like the active in other words it's highlighted so just kind of make note of that you also notice when you click on these it also does the same thing as this so again this is optional but I like to do it just add that to all the links so that you don't get that and I'm going to erase these other ones right now we're not going to need them [Music] all right so now it's time ahead and build on the jQuery so first we want to get how many items we have right because we don't want to set it to eleven even though we know that how many we have but we want to make it dynamic because you you won't always have the the items hard-coded into the HTML like this maybe you're getting it from a database or something or looping so you don't want to have a tight net you want to have a dynamic value not a static so to do this what we can do is say I'll say alert and to get the length you just grab the item that you want to check for rice in this case all of these group items here Oh easy way to do is we can put all these inside of a div let me just do that really quick grab all of the all the individual divs and put them in one parent div and for that parent div I'm going to add an ID that says I'll just name it loop and then I'll paste that in there so then in jQuery what you can do is type in home that ID which was loop followed by the class right so the subclass or the child class beneath that that you want to check so I'll show you what I mean so right here the parent ID of I mean the idea of the parent div is loop the child of that is list group okay so we want to specifically check for all list groups inside of loop and we do that by first specifying the ID and then the class which is list group and then we just add length to that so what I'll do is I'll save this as a variable I'll name it number of items and then in whoops then in this alert here I will paste that so the number of items and see what we get so you see there we're getting 11 next we want to set our limit and again you can do this dynamically you can let the user specify whatever you want to do but I'm just going to set a limit is a limit per page and I'll set it to 4 and so I want to show you a selector in jQuery and what it's called a is GT and so the way it works is you let's say let's say you have four items right and of course you always start off with 0 1 2 3 4 I mean 0 1 2 3 like in an array right so let's say I pass in the let's like to write so it's only going to get the this 3 right so basically it takes whatever index you're specifying and it grabs everything after that index right so let's say I said 1 then it would grab 2 & 3 and so we're going to specify up to the limit and then hide everything else right so only show 4 and then hide everything else okay but remember like I was saying it doesn't start off at 1 it starts off at 0 1 2 3 right so because you have that difference right you want to subtract 1 since this is 4 items but it ends at 3 and this one is actually 4 so whenever you're setting whenever you're setting it you want to subtract by 1 okay and I'll explain that all in a second here again so i'll say loop and then list group : GT and then pass in parentheses and actually um let me set all these to double quotations you don't have to do that but I'd like to do that with jQuery because you run into some issues in certain cases so then inside of here I'm going to go ahead and pass in so normally you can just hard code something in here let's say I did that right that'd be fine but if you want to pass in a variable like this one what you have to do is pass in the quotations like that and then concatenate the variable in right so in between there so we'll say and then you have to also put in parentheses so I'll say limit per page minus one okay and just really quick for context I'll just show you what happens if I don't put that one in there you'll see kind of how it doesn't work so then I'll just say hide and so you see now it's displaying five right and so the reason for that is because it's starting at the fourth so this is zero one two three four so everything after that it's what's being hidden so then if I just pass in minus one then you'll see that actually does limit it to the four that we need then we need to figure out how many pages are we going to need so that we can implement that number here so the simplest way to do that is just with some simple math so you take the total number of items right so total of items and then you divide that by the limit that you have set right so let's say I have 20 total items and I I see how many times that can be divided by 4 which is the lemming right and so that will tell us that we're going to have 5 pages so I'll just create a new variable for that and name it total pages and then I'll set that to number of items divided by limit per page afterwards I will go ahead and alert that and show you why this causes issues right so you see it's going to give you 2.75 if you used 11 like I did so we don't want we don't want a decimal on the number like that we want a whole number right so we'll have to do is just round this up which is really either doing JavaScript you just add right here math the dot round and then add the closing parenthesis and then you'll see now it rounds to three so now what I'm going to do is going to go back to this HTML and inside of the the page number buttons I'm going to get rid of number one altogether so let me get rid of that and I'm just going to paste it in here and then comment it out for right now and so what I'll do is I'm going to actually insert that or append it here in the JavaScript right here in the jQuery file so what I'll need to do is use a unique ID or some type of class to do that so we already have a class here to work with for the unordered list which is page ination so we can use that and I'll just say class pagination dot append and then I'm going to pend this in there like that and so for the double quotations here you'll need the single ones and this is what I was saying before you always want to use the double quotations in jQuery because you'll run into issues in certain cases and along with the number here you have to actually concatenate that so you have to end quotations there and the plus sign same on the other end and then open the quotations again then you would just want to save that and make sure it's getting appended on and then you'll see it right there now I'm running into an issue here where the next button or next page button is here and the reason for that is because in HTML let's see where is it okay right here everything that gets appended gets appended in order after this so it'll create a new one say right here after next button and you can change that in jQuery there there are a few ways to do it but what I'm just going to do is just take it out altogether and then I'll do the same thing I'm going to append it but I'll just append it after after the other the other one I'm actually going to well here let me create it really quick and so it's I keep forgetting about these single quotes right so it's going to be the pagination class that append and oops let me put that in double quotations the same thing changes the single all right and then I'm going to well first I'm going to check to make sure that worked ok to did but then I'm going to comment it alpha right now and so so we've already appended the first page and then down here we have the next button right so in between that we need to insert all the pages that we'll need according to the total pages right and so that would just be a simple loop right and so the condition that we want to make sure so first I'll create a variable and the condition that we want is we want to make sure that variable is less than or equal to the total pages and then we want to increment it by 1 each each loop okay so so every for every number of pages that we have we need to insert a market write a page number and so will append it here right and so the way this is going to work so we'll set this to a value and it's going to loop it's going to append the page number so say it's going to insert page 2 right and then we say insert then it's going to loop back and it's going to check if if it's reached the total pages yet we know the total is 3 so at this point if it's less than or equal to as a condition so once it reaches 3 it's going to loop one more time it's going to run that insert again and then that's the max pages that we'll have right so let's draw this out to see what it looks like so we want to start off with 2 and the reason that we want to start off with 2 is because we've already inserted page 1 all right so we want to start off with 2 and go up to whatever max we need so then what we'll do is whoops into the pagination will append and then we're going to impend a new this same thing up here so I'll just copy this and instead of having the number hard-coded like this we'll change it to this variable right so as a recap this is basically what we're doing first we insert the first item the first page number then we keep looping through all the items that we have until we reach the total right so on the first loop this is set the two so then it's going to insert page number two then it's going to loop again and then it's is going to be three at this point and then three is less than or equal to the total number of pages because there's three total pages so it's going to do it one more time it's going to enter that third page number then it's going to loop again but this time I is four because we incremented it here but four is going to exceed total pages so it's greater than so it's not going to loop anymore right so we only need to insert the number of pages we only need to append by the number of pages that we have ready that makes sense and then afterwards we go ahead and attach this next button at the very end so hit save on that and then you just want to make sure everything is good and you'll see here that the three page numbers and I'll show you just really quick you can actually let's say and add a few more of these right I just want to show you what happens so now you'll see it automatically added the additional pages that I needed right so no matter what it's dynamic and no matter how many you know items you get it's automatically going to increment this based on the limitation that you set so now we need to give functionality to all the page numbers right so when users click here right now it's not doing anything so we just need to add some functionality to that so what I'll do is in here when I'm inserting these these page numbers I add an ID to it so that I can manipulate it so I'll say ID and I'll just name it um current page so now we can play with that so what I'll do is I'll say pagination and then list item and then the new class I created is a dot current page right so to go into the main the parent class which is pagination then to the list item that has the class of current page which is going to be this this one right here then I'll say I'll activate an event when users click on it on so I'll just say click and then pass in comma and then pass in a custom function for right now I'll pass an alert that says user clicked on page number oh actually I just realize this I have this set to class here but I added ID appears to let me just make that class so now you'll see when you click on each of these buttons it'll tell you that you clicked on a page right and you'll notice if you click on the arrows then that doesn't display anything and so that's the reason why I attach a class to this list item because for example let's say I just did pagination in general right what happens is when you click it yes it'll it'll bring that alert but now if I click the arrows it also brings ealer because those are also list items in that unordered list okay so you just want to make sure you specify that only this item right here so we need a way to get which item users clicked on so what we can do is get this current item this current element and get the index right so it's just index method as ala days and it gives you whatever index that is in the element right so say for example I have four buttons right what's actually going to be 0 1 2 3 right so if users click on that first one then index is going to return 0 element second one that is going to return one element and so on so all you need to do is just pass in this no I'm actually it's not in quotations just this and then dot index right so it returns the index of this current list item and then I'll save that to the variable and I'll just say current page and then for right now I'm going to say user clicked on and then I'll say current page just because I want to make sure it works so now let's say for example click on the third page you should get that third second and then first oh actually this the first one's not working because I forgot to add that class to it as well so just up here inside the list element you want to do the same is down here I'll just copy it and then just go back and make sure that works and one last thing I also want to make one the default class because that's obviously the first page is going to be displayed so after this current page here I'll just add active this is a bootstrap CSS class that's implemented so you notice now by the fall it's highlighted blue to symbolize it it's the first you know is the current active page so I also want to remove that class right so this highlighted blue whenever users go to another page so what I can do is just remove that active class so you don't want to do this because the the class the active class is not going to necessarily be on the list element that was clicked on so for example if I click on number three and you say this then it's going to try to see if active class is attached to this to the third one but it's not it's attached to the first one so you don't want to use this you want to just specify any item in the page a nation class right so you can say dot pagination and then just list item and then we can say dot remove class and so and then pass inactive so whenever users click on a button it's going to search all the list elements inside the page a nation class and remove active from all of them from any of them that have it right so I'll show you really quick how this works so if I click on three you know it removes it from the one and same thing if I click on two it removes it from the one so then we need to re add it to whatever the current one is that users clicked on so for that we can use this and then we need to so we say this add class and then active so let's see what that looks like and you should get that effect now I want to show you something really quick then you go back and say user click on number ok and so you'll notice now whenever you click on page it has that alert right well if you click on the same page it still brings up the alert so in other words I show that to highlight that it's it's running this entire function every time you click on the page even if you're clicking on the page that's already loaded and we don't want that we only want to execute the code if the users are trying to go to a different page otherwise we don't need to do anything right it shouldn't do anything if you click on the exact same page so we can run a check right we can say if we can say if if this has class of actives meaning it's the current active element right so for example page 1 by default has this active right so if users click on a list element it's going to check if the it was the the element that was clicked already has this class so if you click on the first one each one since it does have active as a class it's going to return true as a condition so what we can do is say return false right rather than return true and so what that does is it doesn't execute the function it just returns false it does nothing and else then we can plug in all the code into there so just as a recap what this is doing is you click on a button and then it checks that element it checks to see if it has the active class in other words if it's the current page that's being displayed if it is it does nothing if it isn't then we're going to go ahead and proceed to the next page you just want to test that by clicking on another page and then you want to click on the same page and make sure that nothing pops up so you can go ahead and delete this alert window now so what I want to do next is hide all of the elements right so I'll say I'll say loop it's a loop and then on dot list group and then I'll hide right so that's that should look like this when you click on another page it hides all the items and then what we're going to do is just redisplay the new items - the all the ones up to that page right so on this first page I'm going to take these four elements and hide them okay so next we need to do some kind of weird math here so this is what we have displayed on the first page right and then this is the second page so what we need to do is grab this these four right here and hide these four here so first we got to get the total number of items so we need to do is get the total up to the page that the users are specifying right so I'm kind of show you draw that out for you for sex so this is the first page and then I'm just going to add third one here [Music] okay so if users click on this second page then we need to tell we need to basically identify that we have a total of eight items and then subtract the four first four from them okay and then if users click on the third page then we need to identify that there's 12 total numbers or items and that we need to subtract the first eight of them okay so first we can get the total we will name it grand total and so that's going to be the limit we have set which is these 4 here 1 2 3 4 and we set that up here which is limit per page because a limit per page and multiply that by the total by the current page right so for example if users click on 2 then it's going to do 4 times 2 which is 8 which is a total number of items that we have or if you just click on page 3 then it's 3 times 4 which is a total of 12 items right so in other words you're multiplying the limit that you have set times the page number to get the total of items that we have so then I'll do current page and then we need to create a loop and then what the loop is going to do is it's going to jump to whatever in this case the right we're trying to jump to page 2 right R and jump to this this fifth item here and we're going to grab that one and the next four items right so right here I'll create my variable name it I and so we don't want to exceed the total number of items right obviously so in other words if we have 12 total items then we don't need to loop more than 12 times because we don't have anything exceeding that now in jQuery there's another selector similar to GT except this one grabs an exact one that you want it to write so you can tell it hey grab the fifth one hey grab two six one seven eight and so forth and that's exactly what we're going to do and so what that looks like is so grab the loop and then the list group passing a : so very similar to what we did at the top here if instead of GT it's going to be EQ alright and then same thing we want to concatenate the variable that we're looping and afterwards we're going to show so we want to start this loop on this fifth element right we don't want to start it from zero so we don't want to do this because what's going to happen it's going to start from the beginning and and then so it's going to start inserting all four of these items so we want to skip to the fifth one and so that's where we use this grand total here so we can set I to equal grand total - limit per page right so in this case so remember the grand total is based on whatever page number you click on right so if you click on page two then your grand total is going to be eight items right and if you click on 312 so forth right so we're taking eight minus the limit which is four and that's going to leave us with four and so remember that when you're dealing with these elements here you also have zero so technically this is five so what that's going to jump to is the four right here right so it's going to jump to the fourth index but really the fifth item okay so in other words start off at zero so it goes here then one two three four and then a right here so it's going to grab that first item of the four of the second set right and it's going to insert it right here or a rather showing it's already inserted it's going to loop again and this is incremented by one so it's now five it's going to grab five so five keep looping and then once it gets to seven it's going to show that one in increment to eight and then when it checks the condition here that it's less than the grand total it's going to return false right because remember the grand total is 8 so you have a is going to return false it's no longer going to be looped and then that's it so hopefully that made sense I tried to explain it in a way that was as least confusing as possible but whoops actually on let me not delete that part so I'll just have that there so then you just want to test this out click on another page and just make sure those numbers are good right should have one two four on the first page five to eight on the second page and then nine to eleven on the last page all right sweet so now we just have to give functionality to the back and front button or the before next whatever you want to call it so we'll just start off with next first and so in order to manipulate the next button I just need to add an ID to it so go up here to where have the next identified and I'm going to add something to it I'll just name it on next page right so now I can manipulate that down here I'll say on click first I'm going to test it just always want to do that right so similar to what I did above here where I got the index I kinda want to do the same thing and so what I'll do is I'll get the current page before users have so when you click the button it's going to tell you what page is currently the page that's on the screen right so to do that you just use the pagination class and then pass in the list item and then whichever one is the current active class attached to it and then just grab the index to get what whatever that element item is so I'll save that into variable name it current page input right now I'll just display that here so once you hit this next button it should tell you which page you're on try clicking into the second page and doing the same thing and you should get that too right so we need to know what page were on before we do anything right because if we're on a third page we don't want to navigate away right so we have total pages to find up here right and it's outside the scope of the functions right so what that means is let me copy this right let's say I had a function up here I don't know sneem of something so with that I wouldn't be able to access it in here because it's inside of this function scope but once you remove it and put it on the outside here or the global layer I guess you could say what happens is now you can access this within each function that's all you know in the file so since we identify that at the top we can we can insert that here right so what we want is to stop this function once the users reach the max number of pages right so I'll say if current page is equal to the total pages and return false right so in other words what this is saying is let's say I'm on page three the current page is three well if I click the next button it shouldn't do anything because there's no more pages so it's going to return false otherwise if I couldn't pages two and I click this then we'll go ahead and execute the code which the first thing we'll need to do is increment the page right so as users click on say page one then we'll increment by one and make it page two right and that's what these little two plus signs are just increments by one the next thing we need to do is the same thing up here so I'll just copy it and that is to remove the current class from whatever list element has it so I'll just test that really quick and so when you hit that next that should vanish the next thing we need to do is the same thing up here hide all the items so I'll just test that really quick right and then I'm basically going to do the exact same thing that I did up here so I'll just paste that and I'm basically reloading all the items now I can't do the same thing that I did up here where it is where I added this or either active class to this and because we're not working with the list item itself or point we're working with the next page so we just need to do it a little bit differently and so all it'll look like is like this will say that pagination list item with the current page class and then we use the same method EQ and then add some concatenation in parenthesis in the middle and what I'll do is I'll say the current page now remember this works in array elements right so you know zero index one so right now if say for example the user clicks on so if users click on say the first page it to reading it has the second one right so what you want to do is just add minus one okay and that will fix that because remember EQ grabs by array or you know by indexing we don't want that we want the actual page number right so we'll just subtract that by one and then finally and I'll just go ahead and test that and see what we have and you just want to make sure that you get that one two four five eight nine eleven and that all the page numbers are the class the class the active class is jumping um as you click through the pages and for the previous button we basically do the exact same thing but then we just need to change this so I'll name it previous page I don't think I added that it's actually in the index I just remembered I mean in the HTML so we write say ID previous page and then go back down here and then if instead of checking if this equals the max we just want to check if it equals one because if the user is on page one and there's no sense in activating the function to go back and then instead of going up by one we'll go down by one okay and then just gives us the test and make sure so I'll go all the way up and then all the way down all right and that's it for the tutorial on and this method is actually really awesome because you can basically implement it with any framework because it works with a DOM and I know that there's a lot of frameworks out there that it's kind of difficult to implement this feature within that framework or sometimes it's just way more trouble than it's worth and it's really fast and easy to do with jQuery and you don't need any plugins or any crazy code and it's really easy to do so I highly recommend this method

Channel: David Acosta

Views: 31,673

Keywords: mongodb, expressjs, angularjs, nodejs, mean, meanstack, app, application, single, page, singlepage, spa, tutorial, bootstrap, sublime

Id: Xznn-ggD0GU

Length: 40min 1sec (2401 seconds)

Published: Fri Jul 21 2017