2 Easy Ways to Rest Pagination Using Laravel Livewire

If you are using Laravel Livewire Pagination trait, inside your components. It came with handy resetPage, and goToPage methods to reset the page, in this snippet, we'll look into how to implement them into your livewire component.

The benefit of these methods, is when you are filtering data, and want to back to the first page, it resets the pagination to the default state.

Here's an example:

 1...
 2use Livewire\WithPagination;
 3 
 4class UserList extends Component
 5{
 6    use WithPagination;
 7 
 8    /** @var array */
 9    protected $queryString = [
10        'search' => ['as' => 's', 'except' => ''],
11        'page' => ['as' => 'p', 'except' => ['', 1, 0]],
12    ];
13 
14    public function updatedSearch()
15    {
16        // you may want to validate the requested data
17        $this->validate([...]);
18 
19        $this->resetPage();
20    }
21}

We are using the queryString livewire property, if you want to learn more about it, please take a look at the official documentation

The default $PageName parameter in resetPage is page

1public function resetPage($pageName = 'page'); // from the codebase

In case you cast the page parameter query into p something like

1domain.com/?p=10&search=foo

You may use it like the following:

1$this->resetPage('p');

There is another method, and it does the same trick as resetPage, it's goToPage methods.

This method, it's not just resting the page, also, you can switch pages, in case you want to build a really custom pagination for example (there are other handy methods, for this case as well)

1$this->goToPage(1);

Or

1$this->goToPage(1, 'p');

---

That's it for today, and if you have any questions, let me know in the comment section below, or you are into these type of tips/tricks, make sure to follow me on Twitter to learn more.