Whenever we work with a collection of things, we typically want to be able to easily navigate through them. Like, for example, our article list is, well, it's rather long, and yes, we can scroll through it, but ideally, we would divide this into individual pages. And Laravel has built-in pagination, but that's really not going to help us in our case because that is more geared towards not necessarily static websites, but websites that aren't treated as single-page applications. But Livewire also has built-in pagination, and to use it, we just need to use the withPagination trait. So this is the ArticleList component.

pagination trait. So this is the ArticleList component. I have included the withPagination trait. So now, whenever we retrieve the articles to display in the Vue, we will call the paginate method. We'll pass in the number of articles we want per page. And then inside of our Vue, we just need our list of links to the individual pages. That's typically at the bottom. So let's add a div, and we will use our articles to call the links method. And if we scroll all the way down, we see now we have our individual pages.

So let's add a div, and we will use our articles to call the links method. And if we scroll all the way down, we see now we have our individual pages. We can navigate to those individual pages, and everything works like it should. And notice whenever I click on one of these page links, it automatically navigates us to the top of the page. We can control that behavior with the data array. There is a scrollTo option that we can set to false, and this changes the behavior that we see in the browser. So now, whenever we navigate to another page, we can see that we aren't sent to the top of the page.

So now, whenever we navigate to another page, we can see that we aren't sent to the top of the page. The page is different. It's loaded where our list of articles appears. But since we turned off the scroll to feature, it preserves the scroll position in the browser. But we can also change this to a CSS selector. So let's say that we wanted to scroll to the top of the table. So I want to be a little more specific and say, go to the table that has a class of WFUL. That is, of course, our table here. And whenever I change the page, the browser automatically goes to the top of the table.

That is, of course, our table here. And whenever I change the page, the browser automatically goes to the top of the table. So we have different options when it comes to controlling the scroll inside of the browser. But I personally don't necessarily want to have to scroll all the way down to the bottom to navigate between the different pages. So I'm going to provide some links at the top. It's going to be after our create link, but before the table. And I'm going to change this so that there's some margin both at the top and bottom. So that now we can just navigate here and I don't have to scroll. I like it.

So that now we can just navigate here and I don't have to scroll. I like it. So now I want to add some more functionality here because we have the ability to publish and unpublish articles. And we can see that we have four published articles. I would like to be able to filter this list based upon if an article is published or not. So I'm going to do this. I'm going to leave this link here, but I'm going to add another div that will contain a couple of buttons. Let's add some styling here.

a couple of buttons. Let's add some styling here. For the most part, it's going to resemble the link that we have, except I'm going to use blue instead of indigo. But all of the other values are going to be the same. And in fact, we should probably change our link to be similar. And we're going to have two buttons here. We'll have one to show all. Let's not use display. Let's use show all because that takes up less space.

Let's not use display. Let's use showAll because that takes up less space. And then we will have showPublished. And you know what? I think it would be nice to go ahead and include the publishCount here so that we can say showPublished. And then in parentheses, we could display the publishedCount. That looks a little horrendous. So let's do this. We know that we have some placeholder text.

So let's do this. We know that we have some placeholder text. So let's start off by providing some placeholder text. And we'll just say loading. So that's inside of what? That's the placeholder. Well, we need to revisit this. So let's do that. Let's change our div to a span. And I think as far as our placeholder, that's it.

Let's change our div to a span. And I think as far as our placeholder, that's it. But we do need to open up the published count view, which again, let's change this to a span. Let's get rid of this text that says published. All we really want is the count. And then from there, we just need to open up the published count class. And we have that placeholder text, which we will initialize as an empty string. Then we're going to sleep. Let's change this to sleep to one second so that we don't have to wait forever for that.

Then we're going to sleep. Let's change this to sleep to one second so that we don't have to wait forever for that data to load in. And then when it comes time to display our message, instead of having this long publishedCount as loading, we will simply have our placeholder text. So now we see our, well, that was very quick, but it's a lot better than what it was being on multiple lines. Let's change the styling for our createArticle. And in fact, let's change this so that it looks like a link instead of a button. So we'll get rid of the text gray.

And in fact, let's change this so that it looks like a link instead of a button. So we'll get rid of the text-gray. Instead of bg-indigo, we'll have text-blue-700. And our hover will be text-blue-900. I don't think that's going to look good, but we can always adjust it. And yep, that is way too dark. So let's do this. Let's do 300 and 500. And that's probably too light. We should probably do 500 and 700.

And that's probably too light. We should probably do 500 and 700. So let's do that. I'm spending way too much time on this, but I want it to look at least halfway decent. We're going to say that that looks fine. So now what we want to do is set up some actions for whenever we click on these buttons. And we will call this first one showAll. Then we will have a separate action for showing the published. And we'll just say showPublished. I mean, we could get a little bit more descriptive, but I think that that's going to work.

And we'll just say showPublished. I mean, we could get a little bit more descriptive, but I think that that's going to work. So that instead of our published count, we now need, well, not a published count. We're done there. Instead of our article list, we need to provide those two methods. So we had showAll, and then we had showPublished. And I think what I want to do is have a property, which it can be public, and we'll just say showOnlyPublished. And we will initialize this as false because we want to show all of the articles by default. So that whenever we showAll, we will set the showOnlyPublished to false.

And we will initialize this as false because we want to show all of the articles by default. So that whenever we show all, we will set the showOnlyPublished to false. And whenever we want to show only the published, we set that to true. But of course, that changes what we will need to do inside of our render method. So we can start off like this to where we will build a query. We will use the query method on our Article model. Then we will check if showOnlyPublished, then we want, no, we don't want to do that. We'll just say query where our published column is true, or 1. Then when it comes time to actually execute our query, we will use that. We'll call paginate(10), and okay, that should work.

Then when it comes time to actually execute our query, we will use that. We'll call paginate(10), and okay, that should work. So inside of the browser, we will show all, we will show published, we will show all, we will show published. So that's great. That works. We can navigate to individual pages, and whenever we want to show the published articles, nothing displays. Now that might seem a little weird, but take a look at the URL. It says page=3.

Now that might seem a little weird, but take a look at the URL. It says page equal three. So Livewire still thinks we are on page three. We have a lot of articles that we want to display, but in reality, we don't. We have just four articles that we need to display, which is just one page. So we need to be able to reset the page whenever we change our filter, and that's very easy to do. We have a method called resetPage, and we need to do this both inside of the showAll method and inside of the showPublished method. I guess we could combine this into one method, but I like having it separate, so we're going

method and inside of the showPublished method. I guess we could combine this into one method, but I like having it separate, so we're going to leave this as is. So now we are starting at page three, but of course, let's navigate around. Let's go to page four. Whenever we click on our showPublished button, now we can see our four published articles. So if we look at the URL, it reset the page to one. And whenever we click on the showAll button, it is going to still be on page one. And that's really the behavior that we want. Whenever we change our filter, we want to reset the page to the first page.

And that's really the behavior that we want. Whenever we change our filter, we want to reset the page to the first page. So that's all well and good, but now we might have an issue. We don't have this particular example, but there are going to be times when we would have multiple Paginators, Paginators, Paginators sounds wrong. So I'm going to say Paginators. If we have multiple Paginators inside of a single page in the browser, things can get a little weird. And it makes perfect sense because everything hinges upon this page query string parameter. But behind the scenes, Laravel doesn't know what page we are talking about.

And it makes perfect sense because everything hinges upon this page query string parameter. But behind the scenes, Laravel doesn't know what page we are talking about. Well, it does if we have just one Paginator, but if we have multiple, it doesn't know what page we want to set. So we can name our paginators. Whenever we paginate, that's hard to go between paginator and paginate, oh well. So whenever we paginate, we can specify a page name. So in this case, it really doesn't make sense for us to do that. But for the sake of demonstration, let's do it. Let's say that we would have a page name of articles page, but that's not enough.

But for the sake of demonstration, let's do it. Let's say that we would have a page name of articles page, but that's not enough. Whenever we reset a page, we also need to tell our Livewire component which page to reset. So we also need to include the page name there. But with that simple change, let's get rid of the page query string parameter. Now whenever we navigate to individual pages, we can see in the URL, our query string parameter is now the name of our page or our paginator, it's articles page. So now Livewire and Laravel knows which page or which paginator we want to set the page for.

So now Livewire and Laravel knows which page or which paginator we want to set the page for. It still works whenever we click on our published filter, and it of course still works whenever we show all of the articles. So using Livewire's pagination is very simple. The key thing to remember is to use the WithPagination trait in your component class. After you include that, then you can call the links method and the pagination links will be rendered inside of the browser. If you plan on providing any kind of filtering functionality, be sure to call the resetPage method when the filter changes.

If you plan on providing any kind of filtering functionality, be sure to call the resetPage method when the filter changes. That way Livewire will reset the page to the first page and the filtered list of things can be displayed. And if you have multiple paginators, paginators, however you pronounce it, if you have multiple of them inside of the single page, be sure to use the page name feature. That way Laravel and Livewire won't get confused when you try to change the page.