Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie we set up the variables we need to be able to navigate through our different pages. In this video I'm going to walk you through showing our pagination in our Facebook application. So first things first. We only want pagination on a page if there's more than one page, so I'll add an if statement to check for that, and I'm going to end that if statement right here. So now I'm going add a div so that I can style our paging section. Let's add a line that lets our users know which page they're on.
The navigation I'll build will have previous and next buttons, plus a series of numbers so that users can jump to each page. So we need to create a div for this section as well. I am going to call this pagenav. To make it look a little bit clearer, I'm going to modify this comment to say moviegroup, and let me go ahead and indent this a little bit better. Let me go ahead and Save this, and to make sure we haven't made any mistakes, I'll switch back to my application, and I'll hit the Refresh button.
Now I'm going to scroll all the way to the bottom, and it should say something like Page 1 of 3 right here. Now we're ready to create our links. We'll start with the next link or the next button. I want to check that this isn't the last page, because we don't need a next button on the last page, so we have a variable for next offset. If the next offset is bigger than the number of friends we have, then we can output this link. So what we're doing here is passing the URL of this page, which we do by checking the server variable called _server and pass in the command SELF, it gives you the URL of this page, to that we add the offset by passing our next offset variable.
So it looks good to me. I'm going to save this and switch over to my app and then refresh the page, and now I can see a Next link. So as I said, sometimes this page come a little funky because of the iFrame, so just scroll up and down until it looks good to you. So if we roll over this link, you can see at the very bottom that we are calling the same page, plus and the offset of three, so I'll click on that, and it should be going to the next group of data. Now remember there are some users that did not like any movies, so that's why this page only has one result. Just go ahead and click on Next again, and it takes us to the last page, and that's Page 3 of 3, so we know our navigation to go forward is working properly, and now we need to build navigation to go the other way.
So now we can do a Previous link, it's pretty similar to the Next link, so I'm going to copy this code, and I'll paste it right on top. I'll modify its variable to be the current offset minus the quantity, which will take us back to another page, and this time I'm going to check that the current offset is less than or equal to the quantity of users, that's to make sure that there is no link on the first page.
On the first page, the quantity is going to be the same as the current offset, so this will not show, and I need to modify the class of this span to say Next. So let me save that, and I'll switch over to my app, refresh the page, scroll down to the bottom. I see the next link, so I need to click on this first to go to my next page, and now I see a Previous link, as well as a Next link, let's click on the Previous link, it takes us back to our first page, click on Next a couple of times to go to the last page, make sure we don't have a Next link on the last page, and that our Previous link does show up, so this is working great. So now let's go ahead and output page numbers.
For that we're going to use a forloop, and we'll do that in between the Previous and Next links. So we're going to take to the I variable in the loop is greater then the total pages, and it's going to be a little strange we're going to create a span, but we're not going to close it right here; we're going to leave it open so that we can add another class if this happens to be the current page. Because of the zero indexing of this loop, we need to check for current page -1.
Now we can close the opening part of our span tag, and I'll go ahead and output the closing tag as well. Now we're ready to output each page number that's going to be a regular anchor tag, but that is going to point to the current page and then we'll pass it an offset variable, and the offset variable will be the current number of the loop times the quantity, which will be how much we want to offset on each page, and as the label, we're going to want the I variable +1, because it's zero indexed.
So, it looks like I missed the comma, let me make sure I put this comma right here, and I need to fix another typo at the bottom of the screen. I want to add a closing angle bracket to this div right here. I'll save it, and I'll refresh my page, scroll down to the bottom, and even though it doesn't look that great right now, we can see that there's pages 1, 2, and 3. The number 1 sets you need to offset 0, the number 2 to offset 3 and the number 3 to offset 6.
So that should paginate correctly. If we click on those links, we go to the second page, you can see the Previous and Next links right next to each other. So creating the pages is just a matter of putting our variables to work that allow us to programmatically create the links to different pages. This doesn't look very good right now, but in the next movie I'm going to show you how to style our navigation.
Get unlimited access to all courses for just $25/month.Become a member