Easy Pagination with Inertia
Playing
01. Easy Pagination with Inertia

Episodes

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

Transcript

00:00
In this snippet, we're going to look at a really nice, easy way to work with pagination in Inertia.
00:05
We're going to build up the pagination ourselves, generate a list of dummy data, and then display it like you can see here. So let me just give you a really quick demo of this,
00:15
just so we can see what's happening here. As you can see, the pagination looks pretty much how you'd expect. We've got a huge amount of records here.
00:22
And we can just click through on any of these page numbers and see that page. Of course, with no page refresh, we're just gathering the data and updating our component here.
00:32
The Next and Previous buttons work nicely as well. And we're building this component out here completely from scratch. So you can customize this in any way you want,
00:40
change colors, change how this looks, get rid of things you don't need. And you can do pretty much anything. So I'm going to go ahead and set up a fresh project
00:49
with Laravel with Inertia installed. And we will get to work on the easiest way you can get pagination set up. OK, so I've gone ahead and created a completely fresh
00:57
Laravel project here. I've pulled in Laravel Breeze. I've gone ahead and run our migrations. So we have the users table in the database here.
01:05
I've registered an account. And I've gone ahead and created out a users page just here. If you're new to Inertia and we need a little bit more context, that's just creating out a users route here in this user index
01:17
controller. And then all I'm doing at the moment is just rendering out this indexed file over in our pages. So that's in user and index.
01:26
And it just looks like this, pretty much the same as the dashboard, just uses this authenticated layout. And at the moment, we're not doing anything in here at all. We're going to grab a list of users
01:36
and output them to the page first of all before we look at pagination. So how do we do this? Well, the recommended way to do this, at least the easiest way
01:45
to do this, is to go ahead and make out a API resource. So you just have a little bit more structure to your data. And this works with pagination as well. So it makes it really easy to do.
01:55
So we're going to go ahead and create out a user resource first of all. And over on our user index controller, we're going to pass the users that we want down
02:03
within this resource. So we'll have a key in here called users. We'll go ahead and use that user resource. And we'll use out a collection.
02:11
Now, with a Laravel collection, if we pass down a pagination object to this, it's automatically going to structure this data for us. So it will give us all of the pagination details.
02:20
We'll dump that out on the client side within view in just a second. So what kind of data do we need? Well, let's just go ahead and grab the latest users here.
02:29
And we're going to go ahead and use that paginate method like we normally would within any kind of blade file. And we'll paginate these by 10. So let's just get rid of that semicolon there
02:40
and go ahead and pull the user model in. And we're pretty much ready to go. Now, over on this page, we can dump this data out. So let's go over to that index file.
02:49
And let's come down to our script section. And we'll use define props in here to let this component know that we're accepting in a list of users.
02:59
And that's actually going to be an object. So let's dump that object out here on a list of users. And let's just take a look at what we've got. OK, so at the moment, we've got this data wrapper here.
03:09
This is now an array with all of the information about these users in. We haven't customized this just yet. So we'll go back and do that in a second.
03:16
Then you can see down here, we've got this meta section. And then we've got a list of links, which is really useful. So let's go and just clear up the data first of all. So over in user resource, we'll come down here
03:29
and just customize this just so we have a little bit less data. So ID is essential because we're going to be iterating through all of these users.
03:37
And let's just output the user's name just to keep this really nice and tidy and simple. OK, so if we come over now, that now gives us this data. And then we've got this links metadata inside of here.
03:49
We've also got a meta object as well, which is what we're going to be using. But we can make use of links if you need to. OK, so now what we need to do is generate out a load of users
04:00
that we can use to test this out. So we're going to do this using PHP Arts and Tinker. Just before we bump into this, if you are new to Laravel or you're new to factories,
04:10
we have a user factory over here, which gives us a predefined set of data which we can use to generate out fake data either for testing or for seeding our database.
04:21
So we're going to go ahead and boot into a Tinker session. This is going to allow us to say user factory. That will resolve that user factory for us. And we can choose how many times we want this to run.
04:31
So let's go ahead and just say 500 for now. And then we're going to persist this to the database using the create method. That will have created, if we just take a look, 500 records.
04:41
And we, of course, now have 501 in there. So we can exit out of this. And if we head over here, of course, we've got a lot more data in here.
04:49
Let's just start to iterate through that before we do anything with pagination. So we're going to go ahead and create out a div here. And we want a condition on here because we
04:57
don't want to display any data or even our pagination links if there are no user results. So let's say users.data.length. So as long as we have some users in here,
05:08
let's start to iterate through them. So for this, we're just going to go ahead and say user in users. We're going to go ahead and give this a key so it can be rendered properly.
05:17
And we're going to go ahead and output the user's name in here. And maybe we can add in the ID. That just gives us a good idea as to the positioning of these as well.
05:27
So let's say user ID. OK, let's just check this out. And yeah, let's just see. We need to reference user ID.
05:34
That would help. And OK, so we're not seeing any of the data in here whatsoever. That is just because we're not going into the data attribute. Normally what I would do is turn off the data wrapping.
05:45
And you can do that over in an app service provider. And you can actually say JSON resource without wrapping. What that will do is it will get rid of that data attribute that gets passed down just so it's a little bit cleaner
05:59
to iterate over. However, even if you do do this, you're still going to get a data attribute when you paginate because we also need the metadata in there as well.
06:09
OK, so I'm going to go ahead and just get rid of that for now, but that's just a little side tip. And now that we've sorted that,
06:14
you can see sure enough we're getting a list of, in this case, the first just 10 users. OK, so now we want to go ahead and just dump the pagination data out on the page,
06:24
have a look at it, see what we've got, and then see how we can work with this. So users.meta, not users.data. And let's just take a look.
06:33
So the data we're interested in here are actually the links, these links here, not the links that we saw before when we dumped the entire object.
06:42
Basically, these links will give us every single thing that we need to iterate through in order to build up that list of pagination we saw at the start of the video.
06:51
Each of these links also contains the URL, which is really helpful. So effectively, what we can do here is just iterate through a load of anchors
06:59
and just link them through to these pages. So let's go and create our pagination component, passing this metadata down and then iterating through it. So we can do this pretty much anywhere,
07:12
but let's stick this in the components directory and call this pagination.view. And let's go ahead and just write pagination in here for now.
07:20
And let's go ahead and include this into this page so we can display it out. So we're gonna go ahead and import pagination from components and pagination.
07:32
And we can go ahead and just pop that in here. And we can pass that pagination through as a prop and let's just pass in users.meta. Okay, so over to the pagination component itself,
07:47
let's go and accept this in. So we'll create a script section down here. Let's go ahead and say define props. And what do we call that pagination?
07:58
We could call that meta as well if we want to do, it doesn't really matter, we can change that later. And let's just dump out the pagination data in here just so we know that everything is being hooked up
08:08
and it looks good. Okay, so now we just wanna start on the template. So I'm gonna start out with a nav element here. And then inside of this, we want an inertia link component.
08:17
We don't want this to refresh. We don't actually want this to be an anchor. So let's go ahead and import link from an inertia view three. And then what we can do is create out a link component
08:30
in here with an href, which we can bind in. And this is what we want to iterate through. So let's just start iterating through this now. So it will be link in pagination,
08:40
which is that prop that we passed in, .links. Remember, we can just iterate over each of them. We'll go ahead and give this a key. That's really important always.
08:49
So we can just give that as the link label. That makes sense. It's the only unique piece of data we have in there. And then inside of the link,
08:57
we want to output the link label. So we can either do that directly inside of here like this, which will give us the following. You can actually see,
09:07
although it's not styled at the moment, we've got the previous link here. We've got one, two, three, four, five, all the way up to 10, then three dots,
09:15
and then up to 51 with the next link after that, which is great. Or if we have any HTML entities like this, we're gonna want to render them out as HTML.
09:24
Now, cause this comes from our backend and doesn't come from our database, we can safely say vHTML on this and link label. And we can just go ahead and get rid of the label in there.
09:35
And we can even just go ahead and self-close this. So if we head over now, you can see that we've now actually got that HTML entity being rendered out correctly
09:43
because we're rendering out HTML. Okay, so now that we've done this, we want to link through to the correct place. And if we just dump out,
09:52
let's just create a template around this. This is really useful if you want to inspect this data a little bit more carefully,
09:59
but just on the page while you're working, you can do a iteration on this template instead. And that will give you the opportunity to just dump out each of the links in between here,
10:10
just so you can see them as they are. So we've got this label, which can even either be the actual label itself, like previous,
10:17
or it can be the number of the page you want to be on. And we've got this URL object in here as well. So that's kind of what we want to link through. So we can just bind that in here
10:27
and say link URL, not label. And if we head over, we actually now have working pagination. You can see that we can click through.
10:37
It's a little bit cumbersome because we haven't styled anything up, but this works. So we actually have pagination working nicely now.
10:44
Now, I believe if we just head back over to the browser here, we're going to have quite a few errors. That is just because when we use link URL, for some of these elements like the three dots,
10:54
we don't actually have a URL. So what we want to do is just use an empty string here if the URL isn't available and we can actually use two question marks.
11:06
Then if we give that a refresh now, what that's going to do is it's not going to go ahead and set any href for that. And it's not going to cause any issues
11:13
with it for you either. So let's just start to style this up really quickly. So we have something that looks a little bit nicer. I'm going to go ahead and set a relative class
11:21
from the outside here and flex and justify center. All that's going to do is just put everything in the middle for us and relative will mean we have any absolute positioning,
11:29
nothing will come out of this container. And then for the link itself, let's go ahead and just bring down each of these attributes so we can work on this a little bit more clearly.
11:39
And we'll go ahead and create out a class in here of flex and item center. So each of them items will basically just send to that inside of its own container.
11:49
The reason that we're going to do that is because we're going to set a padding on this and let's set the text to small while we're here, rounded to large and we'll set the text to a gray 600.
12:01
Now, if we look at this, it's looking a lot better. But the reason that we are saying flex item center is we're eventually going to have a background on each of these and we want each of them numbers
12:11
to sit in the middle or even these labels to sit in the middle. So that's why we've done that. So the next thing is going to be
12:17
which one is currently active because we can't see what's active at the moment. To do this, we're going to go ahead and conditionally bind in a class using this object.
12:26
And we're going to set a background of say gray 200. And remember, if we cast our mind back to when we saw that dumped out, we can even just do that now.
12:34
So let's go inside this template and dump that link out and have a look. Yes, and let's just get rid of that real quick. And there we go.
12:46
And you can see we've got active whether it's actually active or not based on the fact that this will be passed through to our backend and we'll be able to actually read this data.
12:56
So that's really helpful to have this in here. So all we need to do is set a conditional class on this based on whether the link is not class actually active. So that makes it really easy now
13:06
if we just get rid of this dump up here to see which one is currently selected. And you can see that works really, really nicely. Now, one really important thing
13:17
we need to focus on now that we've got the pagination working is inertia's preserve scroll. Now, what's gonna happen is if we head over to our user index controller
13:29
and we bump this up to say 50 per page, what we're gonna see is when we scroll down to the pagination, see that we wanna hit link two, that's gonna jump us straight back to the top.
13:40
Now that might be what the kind of functionality you want. But if this whole thing scrolls a little bit further down the page and you wanted to sort of keep the user in the same place,
13:50
you're gonna wanna preserve the scroll behavior of the page within inertia. So what we can do with this is usually when we make a request with inertia,
13:59
like a request to the backend with a form, we can set this as a property. But what we're dealing with here is a link. What we can do with inertia is actually set
14:08
preserve scroll on a link itself. And that will make sure that when the page is requested, it keeps the same scroll position. So you can see here now we can just scroll through
14:17
or click through each of this data and we can see this working nicely. So it's really up to you whether you wanna keep that in there.
14:23
It doesn't really matter too much. Now, the next thing we're gonna focus on is if we're on page one, you can see that previous, if we just inspect this,
14:32
still actually has the same styles. So it kind of looks like we can click back onto previous. What we can actually do here is again, conditionally bind in a style.
14:42
So we could set the text to say gray, let's say 400, make this important. So it overrides the text color that we've got here. And we're gonna say, if we don't have a link URL,
14:54
we wanna make that slightly more gray. You can just about see it here. I'm gonna bump it down. We don't wanna bump it down too much,
14:59
but I'll roughly bump it down just so you can see that working. So now when we go next, that's just gonna go ahead and show itself.
15:04
And then when we got to the last page, of course we can't click next. So we don't see anything. What you could even do is change over the pointer
15:12
as well if you wanted to with Tailwind styles. It's of course completely up to you how you customize this. Okay, so I'm gonna head back over to the user index controller,
15:20
bump this back down to 10 again. And the last thing we're gonna talk about is customizing the pagination next and previous links. When I first did this,
15:28
I didn't really like the fact that it has these little arrows here. It doesn't really look that nice. We kinda wanna customize this to look how we want.
15:37
Now a really easy way to do this is to go ahead and publish the language files within Laravel. They don't come within your project by default.
15:44
So all we need to say here is lang publish. That's gonna go ahead and publish out the language files in our project. And we can head over to the pagination section here,
15:54
come down and just change these over. So we'll get rid of these two HTML entities. And there we go. We have a nice clean pagination.
16:03
So with all this data that we get into this pagination component here, you can pretty much build this up however you want. A few if statements here and there,
16:11
you'll be able to build something up that looks exactly how you want. But this is the easiest way to implement pagination within Inertia and Laravel.

Episode summary

In this episode, we're diving into an easy way to set up and customize pagination when building a Laravel + Inertia app. We start from scratch—spinning up a fresh Laravel project, installing Inertia, running migrations, and whipping up a users page that will eventually display paged data.

First, we walk through creating dummy data using Laravel factories so that we have plenty of users to paginate through. Then, we learn how to structure our paginated data with API resources and send that clean data over to the Inertia Vue component.

On the frontend, we dump out and inspect the structure of the paginated data, learning about the payload's data, meta, and links properties. We see how these make our life easier by providing all the info we need to build a custom pagination component.

Next up: building the pagination component in Vue. We go line by line, making sure to support clickable page numbers, previous/next controls, handling of "..." dividers, and of course, preventing page refreshes by using Inertia's Link component. Styling gets some love too, making the current page highlighted and inactive links faded out for clarity.

We also look at how to keep the user's scroll position when clicking between pages, using Inertia's preserve-scroll feature. That way, pagination feels smooth and snappy.

Finally, we top it off by customizing the look of the previous/next arrows by publishing and tweaking Laravel's pagination language files—making sure your app's look stays consistent.

By the end, you’ll know exactly how to roll your own flexible, good-looking pagination in Inertia, and have plenty of tips to adjust things to your taste.

Episode discussion

No comments, yet. Be the first!