Learn Livewire
This episode is for members only

Sign up to access "Learn Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
22. Pagination and customising it

Episodes

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

Transcript

00:00
Working with pagination in LiveWire is incredibly straightforward and to be honest it just works but there's a couple of things that we can do to customize the experience and I'll show you these as well. Okay so we want to paginate this huge list of books we've got probably way too many on this page let's go over to our book index and as you can see here we're just iterating through the
00:21
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
00:41
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
01:06
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
01:26
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
01:50
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
02:17
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
02:40
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
03:06
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
03:29
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
03:51
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
04:18
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
04:41
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
05:02
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
05:25
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

Episode summary

In this episode, we dive into working with pagination in Livewire, and you'll see just how hassle-free it is to paginate large lists—like a big stack of books. We start by adding pagination to a list using a simple trait (WithPagination) on our Livewire component. After importing and using the trait, we swap our get() method for paginate() in the component's render method—and just like that, pagination is active.

Next, we update our template to display pagination links with the standard Blade links() method. We make sure to wrap this in an if statement, so it doesn't throw errors when there are no books to show. Clicking the pagination links updates the displayed data smoothly, and you'll also notice Livewire manages the query strings for the page, so you can refresh or share the URL and stay on the same page.

We also explore a bit of customization: switching to simplePaginate() for just "Next" and "Previous" links, adjusting the layout for better spacing, and more. A key feature covered is how Livewire handles scrolling when paginating. By default, changing pages bumps you to the top—standard for most paginators—but you can disable this or specify a page element (like your book list) to scroll to instead, making for a smoother user experience.

To wrap up, we mention that there are even more options (like cursor pagination and custom paginators), and the Livewire documentation is the place to dig deeper. For most use cases, though, the basics covered here will take you a long way!

Episode discussion

No comments, yet. Be the first!