Sign up to access "Learn Livewire" right now.

books we want to go ahead and introduce pagination so let's go over to our book index and whenever we want to paginate results the first thing that we need to do is make sure we include a specific trait within our component it's a trait because it's not always needed and it pulls in all of the functionality that pagination requires just so every component

doesn't have this so we're going to go ahead and use with pagination and that's from LiveWire directly so we pull that in of course make sure we pull in the import here and we're done this isn't going to change anything about this page at all other than the fact that we now have the ability to paginate so where do we want to paginate well in our render method instead of just getting

all results so like we do just standard within live within laravel we just paginate this and we choose how many records we want I'm going to bum this right down to three just so we can navigate this a little bit better and when I refresh the page sure enough we only have three books on the page now it's as simple as that now of course we need to output the pagination links

so let's go over to our book index template and go ahead and add these down here so we just do again exactly what we would normally do inside of our blade templates and we use the links method now it's at this point it's really important if you don't have any books this is going to fail because it's not going to have anything so we want to go ahead and make sure we wrap this and say

books count and in the if statement there and of course you can add an else if you wanted to just put a note in there to say that we don't have any books and as you can see we have some pagination links and when we click on these we go to the next page these all look very similar at the moment but as you can see we can navigate through each of our pages now what's happened in the query string

is livewire has attached this the query string so of course we see the page that we're on and we can just hit that and we end up on the same page so it's exactly as you would expect normally okay there's a couple of additional things we can do here just before I do that I'm going to space out the items in here a little bit better so let's go ahead and change this up so we get a nice spacing

on our books but then we have a bit of a larger spacing between that and our pagination okay so the first thing that we can do is change around the way that this looks by using simple paginate and this is the same case for laravel itself as well without using livewire and that just gives us next and previous links you can customize all of this stuff all of that is in the laravel

documentation so you can change around how these look and use custom paginators pretty much anything you want to do I'm going to switch this back to paginate very quickly and we're going to look now a really important part of pagination and the behavior that livewire gives us when we introduce pagination now when we scroll down and let's just open up our console open up our network request

and go over to document when we go ahead and choose a different page notice that this isn't refreshing the entire page we're actually making an xhr request to grab the new data you can see it's just updating in the way that you would expect it kind of looks like the page is refreshing because this is bumping us to the top of the page which is standard pagination behavior but you might want

to customize this depending on how your data looks it's kind of sensible for the data we're working with to jump to the very top but we might want to disable this altogether or jump to a very specific position and we can do that very easily so we do that inside of the links itself so let's go ahead and add this in so we can pass in a bunch of data in here and inside of this array we can set where

we scroll to so for example if I wanted to disable this I could just set this to false that might be good for really small data sets where you want to keep the user on the same position in the page so passing this data inside of an array and set scroll to to false let's come down and check out what this looks like hit 5 and you can see sure enough we're not being put back to the very top

of the page so we can just scroll without that change the pagination without that scrolling now what you can also do which is really interesting and really good for user experience you can give a selector in here so let's just say that we wanted this to scroll not to the very top of the page up here to the very top of the body we wanted this just to go to the top of our list

of books well if we provide an id for this let's just say books we can just provide the id directly into scroll to so we could say books and that will scroll to this position let's head over and try this out so when I scroll down and hit this that goes to the top of our books a little bit more convenient because of course that means that we don't need to then scroll down a little bit to

view the rest of our list so there's a ton of things that you can do with pagination you can customize this you can use cursor pagination all of this is in the livewire documentation but this should give you a really good head start and the majority of the time we're just going to be doing stuff like this anyway