Pagination

Quick reference

• 00:05 In this video I wanna talk about Pagination.
• 00:07 So what exactly is Pagination?
• 00:10 Well, you've likely seen this at the bottom of a blog post or
• 00:13 something that has multiple pages.
• 00:15 Pagination allows you to switch to the next page, click a little link and it's
• 00:19 usually got a little arrow going forward or backwards, or numbers in the middle.
• 00:23 So page one, page two, page three, and you can click on one of those numbers or
• 00:26 you can click on the arrows.
• 00:27 And Pagination is very popular, like I said, with blogs,
• 00:30 with shopping type websites, where you're paging to the next page, of item results.
• 00:35 So, CSS allows you to do Pagination pretty easily.
• 00:38 So, let's come back here, and we'll create a class called pagination.
• 00:45 And we start out with a display of inline dash block
• 00:51 and it's all we need to do there but remember each pagination is a link.
• 00:55 You wanna click on it so we need to create a pagination a and
• 01:01 let's give this color black.
• 01:04 And we're gonna float these, left.
• 01:07 Remember float?
• 01:09 And let's give this a padding of ten pixels.
• 01:13 And we want no text decoration, so none.
• 01:17 So really, that's all we have to do.
• 01:19 Now let's create some fake pagination here.
• 01:21 We start out with a div class equals pagination, right?
• 01:29 And now we basically just need a bunch of links.
• 01:32 But I'm gonna start out, we talked about special characters many videos ago.
• 01:36 So I'm gonna actually create a link, I'm gonna create two links here and
• 01:40 these will be the left arrows and the right arrows.
• 01:43 And remember we had that special character and it was the and
• 01:49 sign, l a q u o, and likewise another and sign, and ra q u o,
• 01:54 stands for left and we need those guys to end it, semicolons.
• 02:01 So, if we save this, come back here and hit reload, you see what I mean,
• 02:04 we get these two little double arrow things, very nice effect for pagination.
• 02:08 And then, after that we just need, actually I'm just just gonna copy this
• 02:14 And let's get this 2, 3, 4, 5.
• 02:16 And if we come back in here type in 1, 2, 3, 4, 5.
• 02:24 And save this, come back here and hit reload.
• 02:26 Now we get this very nice sort of pagination.
• 02:29 Now these links obviously don't go anywhere.
• 02:31 This is a programmatic thing.
• 02:32 You're back end guy.
• 02:34 Or you would point these to the links you wanted them to go.
• 02:37 But very easy to do pagination.
• 02:39 And we can style these in CSS
• 02:43 using our CSS that we've already created in the past.
• 02:46 So if we wanna come down here and do pagination a hover, all right?
• 02:53 And go color red and save this, hit reload let's see, we can do it like that.
• 03:01 Just like you would style any other link text of any kind.
• 03:05 You could do hover.
• 03:06 You could do underline.
• 03:07 You could do text decoration none, whatever you wanna do.
• 03:10 And it's just a really cool thing.
• 03:11 You could use background, solid backgrounds, right?
• 03:15 So we could go, background black.
• 03:21 So then we get something like this.
• 03:23 That's kind of cool.
• 03:23 So whatever you want to do, style wise, that gives you the option to do that.
• 03:27 So, that's pagination pretty straight forward and that's all for this video.

Lesson notes are only available for subscribers.