Pagination Dropdown using Livewire

In this tutorial, we will see how to add a Pagination Dropdown to a Livewire Component. Pagination Dropdown allows the User to change the number of Records displayed per Page.

I would assume that you have a basic Livewire Component which supports Pagination already working. Below is the how your render method might look like.

    public function render()
    {
        $results = Product::query()
            ->paginate();

        return view('livewire.products', [
            'results' => $results
        ]);
    }

So here I am Paginating over the Product Model. I am storing the records in the $results variable and passing them to the View. Since we are calling paginate() method without passing any parameter, it would always return 15 records.

Now we will create a Pagination Dropdown in the View which would allow user to change the Number of Records displayed per Page. You can place it at an appropriate location in the View.

<select>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="50">50</option>
</select>

Here we are allowing User to display 10, 15, 20 or 50 records per page. We are going to create a Property in our Livewire Component and connect with this dropdown. We are going to call our Property per_page and we will give it a default value of 15.

public $per_page = 15;

We can connect this property to the View using wire:model so that our code will look like below

<select wire:model="per_page"

Now anytime we change the Dropdown Value in View, Livewire will automatically sync the Component Property.

In order to make sure that the Pagination also updates as the User changes the Dropdown, we just need to pass the $per_page Property to the paginate() method.

    public function render()
    {
        $results = Product::query()
            ->paginate($this->per_page);

        return view('livewire.products', [
            'results' => $results
        ]);
    }

Our Pagination Dropdown should be working currently. However, we have a bug currently. Lets say you have 60 records and by default we will have 4 pages of data. So if you go to 4th Page and select 50 as the number of Records to display per Page, you will get an empty list. This is because we are still on 4th Page and since we are displaying 50 records per page, we do not have any data to be displayed.

In order to fix this, we need to make sure that we switch to Page 1 whenever User changes the Number of Records Per Page. We can use Livewire Hooks. Whenever you change the $per_page Property, Livewire will call the method updatingPerPage and here we can reset the Page Number to 1 using resetPage()

    public function updatingPerPage()
    {
        $this->resetPage();
    }

And with that we have implemented a Pagination Dropdown using Livewire.

If you are interested, please checkout the Livewire Package tall-crud-generator which automatically generates all the Code related to Pagination Dropdown.