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,

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.

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.

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,

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

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

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.

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

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.

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

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

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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

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,

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.

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.

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.

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.

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

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,

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.

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.

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.

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.

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

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.

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,

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,

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.

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.

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.

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

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,

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.

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.

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,

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?

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

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.

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

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,

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.

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,

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,

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,

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.

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.

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

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,

let's just create a template around this. This is really useful if you want to inspect this data a little bit more carefully,

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,

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,

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

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.

It's a little bit cumbersome because we haven't styled anything up, but this works. So we actually have pagination working nicely now.

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,

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.

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

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

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,

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.

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.

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.

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

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

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.

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.

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.

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.

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

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

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

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.

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,

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,

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

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

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.

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,

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.

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,

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,

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.

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

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,

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,

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.

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.

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,

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.

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,

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.