Custom Pagination Presenters with Laravel
Playing
01. Custom Pagination Presenters with Laravel

Episodes

0%
Your progress
  • Total: 18m
  • Played: 0m
  • Remaining: 18m
Join or sign in to track your progress

Transcript

00:00
So you probably already know that when you work with Laravel Pagination, this will generate
00:04
for you a very specific markup with specific classes and this really is for Twitter Bootstrap. It works with other front-end frameworks as well, but of course at some point you might want to change the way this markup is rendered. Now the approach in Laravel 5 is that it uses presenters rather than actual views to go
00:27
ahead and render the pagination. So what we're going to look at is creating our own custom presenter and that will allow us to control pretty much everything about how the markup is generated. So just to start with then, I have a post model already set up.
00:45
So this is just hooking up to my database table and I just have a database table here called posts with about 100 records in. So over in my roots file then, you can see that all I'm doing is just as an example here, I have a root with a URI forward slash posts, I'm just grabbing the post model and I'm paginating
01:04
and I'm placing five for each page. So I want this to be split up. So pretty straightforward stuff and you probably already know all of this. So what I'm going to do then is just create a view.
01:17
So let's create a view under say a posts directory and we'll just call this index.blade.php and under this, we are just going to, we're not really going to work with templating or anything like that. I'm just going to create a very basic layout here.
01:33
So inside of here then, we would have something like if posts count and we want to go ahead and just iterate through these. So for each post as post and then we just end that for each. So in here, we can just put this in H4, it doesn't really matter what we do for now.
01:57
So post title. Okay, so in that case then outside of this loop, we would obviously want to render the pagination. So we do this just by saying posts render like so.
02:10
So let's just return this view here. So let's return posts.index and we'll just say with posts and we'll pass them posts in and we see the following. So obviously at the moment, this isn't displaying properly.
02:25
We need to go ahead and pull Bootstrap into our project. So if we just head over to the Bootstrap site and go ahead and hit download, let's go ahead and just pull this in. So over now, template here, just pop that in there.
02:40
Simple. Okay, so now that that's done, we can refresh here and you see we get nicely styled pagination. But of course, you've come here because you want this to change. So how do we actually do this?
02:52
Well, to kind of understand how this works, we need to look at what is actually created when we use the paginate method. Well to do this, we can just get the class of posts and we'll see exactly what this is. It's a length aware paginator.
03:07
So we know that if we go and look at this, we should have a render method. So this is what we call in our template just down here. So our length aware paginator then returns, if we don't give it a presenter, a Bootstrap 3 presenter.
03:23
So we can go and open this up and see what this looks like. So in here, we have a couple of traits which we'll look at in a moment. We have a paginator instance that's passed into this. We have URL window as well, which we'll look at in a little bit later.
03:38
And we have a few methods in here as well. And notice that this implements the presenter contract. So we can go and have a look at the presenter contract and see what we have in here. And if we just open up pagination presenter, so we've got a render method.
03:55
We've got a has pages method. So our goal then is to create our own presenter, implement the presenter contract, and then we basically want to just copy a lot of what's done here. We can even copy the entire class.
04:06
Now I don't see anything wrong with doing that. There are other ways that we can get around this, but to be honest, this is the best way in terms of just having complete control. So why don't we just create our presenter?
04:17
Let's just start to do this. And I'm going to create a pagination folder within my app directory. And in here, let's just call this custom presenter. So obviously, this is namespaced under app or whatever your namespace is, your vendor
04:34
namespace, and it's under pagination. So this is a custom presenter. And of course, like I said, we want to go and implement this presenter contract. So we can go and grab this just from here, we can pop it up here, and then we can implement
04:52
that. Okay. So obviously, at the moment, we have our presenter. We haven't put anything in there yet.
05:00
We need to go ahead and put them two methods in. But how do we actually use this? Well, we're going to look at a slightly different technique. Rather than use the render method and pass this presenter in, we're going to return a
05:12
view. So we're going to have a view that will then use this presenter, passing in our post model, and then it will render the results. That might not make sense at the moment, but we'll take a look at how this works.
05:24
So inside of our Bootstrap 3 presenter, we know that this extends our presenter contract. So pagination, presenter, and of course, we have a render and has pages method. So before we do any of that, we want to basically take the constructor here and use it in here as well.
05:43
And the reason for this is we're going to pass in our paginator into our presenter. Now remember, our paginator is essentially just that posts variable because that is now a length aware paginator. So there's a couple of things here we need to sort out.
05:57
For example, URL window that is within illuminate pagination. So all we need to do is up here, say, use URL window. And I think that's about it for now. We have a paginator contract as well here, so we can just copy this across just here.
06:16
Okay, so this is done. Let's implement the methods we need to do. So it's a render method and a has pages method. So let's take a look at our Bootstrap 3 presenter and see what this does.
06:33
So here it says if this has pages, then we want to basically return a new HTML string, which is just a way of taking this and generating some HTML. We can even take a look at this in here. So it's under Laravel support, and we have things like to HTML, etc.
06:52
So we need to pretty much do this. So we're going to actually just go and take this over here. And then for has pages, we'll see, we just take a look at that inside of our Bootstrap presenter.
07:05
It just returns the paginator we've passed in whether it actually has any pages. So these are the only two we actually need to get going just for now. This will fail because we don't have these methods either in a trait or within this class. So we'll look at how we deal with this in a moment and the kind of levels you can go
07:23
to customize this. So now that we've got this done, let's just start to think about the kind of implementation. So over in my index file here, rather than use the render method, I want to include a view.
07:37
And I'm going to stick my custom pagination into here. Now, this isn't a view to actually build up your pagination. It's just to go ahead and render it. And I prefer this method.
07:48
Of course, there are other methods of doing this, but it's entirely up to you. This is just how I prefer to do things. So I'm going to call this custom.blade.php. And inside of here, all I want to do is create, say, a pagination wrapper.
08:05
So that might be useful. I don't have to keep doing that on every page. And then in here, with that new presenter, I want to pass in the posts or, you know, obviously, this is reusable, so it could be anything.
08:18
It could be users or topics, whatever. So here, let's just say new app pagination custom presenter, and we want to pass in the paginator. So paginator.
08:31
Okay. So from this, then, we want to render, because our custom paginator, or custom presenter, rather, has that render method. So we now have this markup here, and this will give us what we need.
08:47
But we need to go and include it from over here. So in here, rather than use our render method, let's include pagination.custom, and then we'll pass in our paginator, and that is our posts. So we have this.
09:07
Let's just go and check this page out. We may have spelled something wrong. So app pagination custom presenter. Let's just take a look in here.
09:15
Yeah. Yeah. A written customer presenter. Okay.
09:20
So there we go. This is fine. So now we have class app pagination HTML string not found. That's fine, because we know that inside of our bootstrap presenter, under our render
09:31
method, we're using HTML string, and of course, this is under illuminate support HTML string. So over on our custom presenter, we can just go and use that at the top. Pretty straightforward. So now we start to get to the place where these methods aren't actually defined.
09:47
So let's just take a moment just to explore how this works and what we might need to pull over into our custom presenter. So get previous button. Where is this being called from?
09:57
Well, it's being called from here. So let's, while we're doing this, just refer, let's close everything else off to our bootstrap presenter. So in here, let's search for a get previous, and it can't be found.
10:10
So we can't find this get previous button method in here. Well, that's because it comes from our bootstrap three next previous button renderer trait. So quite a mouthful. But if we go and open this, we can see we have get previous button, and we have get
10:26
next button. Now it's entirely up to you whether you want to actually copy these two methods over, or just simply use the trait or even create your own trait. The reason I'm not going to create my own trait, because this does everything I need
10:41
it to do. However, I have the option here to pass through what I want for the next and previous buttons. So at the moment, these are just arrows, these double arrows, but in our case, we can just go ahead and modify them.
10:55
So what I'm going to do is much like within the bootstrap three presenter, I'm going to use this trait. So it's under illuminate pagination. So in our custom presenter, we can say use illuminate pagination, pull this in, and go
11:11
ahead and use it on this class like so. And while we're at it, we might as well add our paginator and our window methods. So now we see get disabled text wrapper. So disabled text is just anything that we can't click within our pagination.
11:36
Again, let's head over to our bootstrap three presenter and search for get disabled text wrapper. And it is in fact here. So it's safe to say we can go ahead and just pull this across.
11:47
So let's pull this across down here. There we go. So now we have a get links method that isn't found. Again, let's have a look for it in here.
11:58
And you can see we can't find it. And we know it's not within this trait. It's actually now within this URL window presenter trait. So let's have a look inside of here.
12:06
And here is get links. This is just how everything is built up for us. So we want to go ahead and use this trait as well. So again, if we come over to our custom presenter, use illuminate pagination, pull in that trait,
12:24
and go ahead and use that as well. So now we just have a couple more methods. So get active page wrapper. That's pretty straightforward.
12:32
It's just the wrapper for the page that the user is currently on. So let's go and search for this in here. And there it is. So let's pull this over as well.
12:43
There we go. And again, we have get available page wrapper. So this is just the wrapper for each of the pages that are available. So let's go and pull this in as well.
12:55
And put this down here. And we have get dots as well. So get dots. That's again pretty straightforward.
13:03
And this actually calls the get disabled text wrapper method, because obviously the dots in between, if you have lots of pages, you're not going to want to click on them. There's nothing to click on there. So let's paste that in as well.
13:14
So now we're at the state where we're using our custom presenter. But it looks exactly the same, obviously, because we've just pulled over what we need. So here we can just start to play around with things. The first thing I want to do is just give an example of showing all of these available
13:31
pages, but without the dot. So this kind of gets you into the mindset of how can I change this to exactly what I need. So if we look at this URL window class here, you can see that down here, when we make an
13:48
instance of this, like we're doing in our custom presenter, we have the ability to pass in on each side. So on each side will just tell us how many on each side we want to generate, how many links we want to generate.
14:03
So in our case, what we want to do is just simply use something like PHP int max. You don't have to do this. You can just give a large number. But this will just ensure that we always have all of the links that we need.
14:17
So this is probably a rare case. You might not want to always show all the pages. But if you do, and you're styling this in some other really nice way, then you know how to do that now.
14:27
So let's go ahead and just get rid of that for now, but at least you know how to do that and why that works. Now we're going to look at separating, for example, the next and the previous buttons. So you can see here that we start off with this render method.
14:41
And as long as we have pages, we generate the pagination. So in our case, we have get previous button. Oh, I think we kind of forgot to talk about this as well. So I did mention that if I were to pass in some text to this, it would actually change.
14:57
So at the moment, we've got these kind of horrible text icons here. And if we wanted to, down here for the previous button, we could say previous. And for the next button, we could say next if we wanted to. And that goes ahead and changes everything for us.
15:13
So it might be that you want to do something as simple as that. And that's absolutely fine. You can go ahead and do that. So what happens, for example, we wanted to split up the previous button, the next button,
15:24
and the links. So we wanted a previous button, say, to float to the left in some container, the next to float all the way to the end, and these to be maybe centered. We're not going to go too much into this because, obviously, your specifications will be different
15:39
for how you want to style this. But let's take a little go at doing this now. So obviously in here, we're using sprintf. All this is doing is it's taking this, it's placing the previous button here, it's placing
15:51
the links here, and it's placing the next button here. So we could just modify this here. So let's say you had some kind of div with a class here of pagination rather than that unordered list.
16:07
And, of course, what we did is under our pagination here, we gave this class here. So we could even just get rid of that and have that in here. It's entirely up to you how you work this. And we may have within here some kind of div with a left float, for example.
16:26
We then might have the pagination sitting in between, and then we might have another div with a class of right. And all we need to do here is just place in our string placeholders to be replaced by sprintf.
16:43
Of course, you could manually concatenate these in as well if you wanted to. So this looks a bit odd, obviously, but obviously what we have now is we have up here a left floating element. We have our pagination in here, which currently still has items.
17:01
So what we could do is in here just say items. And then down here we could say, well, we don't want these to be list items anymore. Maybe we just want these to be spans or whatever you are doing with this. Obviously, this entirely depends on how you want everything to look.
17:22
So we can get rid of the list items. We have our anchors here as normal. And now we have something like this. So we have our previous, which is now separated.
17:30
We have our items, which are now separated, and our next button, which is now separated. And of course, these work in exactly the same way. If we want to go to page nine or whatever, it works perfectly. And we can go next, next, next as well.
17:45
So we're not going to take this too much further because you already have everything now set up to go ahead and create your own custom presenter for pagination. And what's really great about this is what you could technically do is create one custom presenter and you could create lots of different variations and just extend your custom presenter.
18:07
This would work quite nicely, I suppose. You could just go and over in your custom pagination view folder. You could just create another one with a different presenter here. So you might have a simple presenter.
18:21
You might have a vertical presenter. I don't know. It really depends. But you now have the flexibility to go ahead and create your own pagination within Laravel.

Episode summary

In this episode, we dive deep into customizing how Laravel renders pagination links by creating a custom pagination presenter. If you’ve ever wanted to tweak the markup and styling of the default Laravel pagination (which is geared for Bootstrap out of the box), this is exactly what you need.

We start with a simple demo setup: a posts table with about 100 records and a basic paginated view rendering five posts per page. After wiring up a default Bootstrap-styled pagination (including pulling Bootstrap into the project), we explore how Laravel internally generates the pagination links, using presenters rather than Blade views.

Next, we walk through building a custom presenter class. This includes extending the necessary contracts, copying over important methods for handling pagination links, and deciding whether to leverage Laravel's pagination traits or write your own logic. After getting the custom presenter wired up, we see how to drop it into a custom view, giving you total control over the HTML output.

From there, we play around with changing the look and feel. Want to show every page link with no dots? You can do that! Want to change the next/previous button text or completely change the structure? You’ll see how. We even discuss splitting up the previous/next buttons from the page number links so you can float or style them separately in your markup.

By the end, you’ll understand how to roll your own pagination presenters and create different variations for your project’s needs, rather than being tied to only the stock options. If you ever craved more flexibility from Laravel’s paginator, this hands-on episode will set you up with everything you need.

Episode discussion

No comments, yet. Be the first!