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!