Pagination in Livewire 3.0

January 4, 2025
3:55 pm
No Comments

Step 1: Setting Up Pagination

1. Enable Pagination in Your Livewire Component

Livewire provides a WithPagination trait that makes it easy to add pagination to your component.

Example: Paginate a List of Products

Run the following command to create a Livewire component:


php artisan make:livewire ProductList

ProductList.php


<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Product;

class ProductList extends Component
{
    use WithPagination;

    public function render()
    {
        $products = Product::paginate(10);

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

WithPagination: Enables pagination in the component.
Product::paginate(10): Fetches 10 products per page.

Step 2: Building the Blade View

product-list.blade.php


<div>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Category</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $product)
                <tr>
                    <td>{{ $product->name }}</td>
                    <td>${{ $product->price }}</td>
                    <td>{{ $product->category }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Pagination Links -->
    {{ $products->links() }}
</div>

What’s Happening Here?

@foreach: Loops through paginated products and displays them in a table.
$products->links(): Generates pagination controls (e.g., next, previous, and page numbers).

Step 3: Customizing Pagination

1. Using Tailwind CSS

Laravel’s paginator uses Tailwind CSS by default. To customize the styles, you can update the pagination view.

Example: Create a Custom Pagination View

Run the following command to publish Laravel’s pagination views:


php artisan vendor:publish --tag=laravel-pagination

This will create a resources/views/vendor/pagination directory with customizable pagination templates.

Edit the default.blade.php file to apply your custom styles.

Step 4: Adding Search and Filter with Pagination

You can combine pagination with search and filtering to make your components more dynamic.

Example: Adding Search Functionality

Update ProductList.php:


public $search = '';

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

public function render()
{
    $products = Product::where('name', 'like', '%' . $this->search . '%')
        ->paginate(10);

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

Update product-list.blade.php:


<div>
    <input type="text" wire:model.debounce.300ms="search" placeholder="Search products...">

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Category</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $product)
                <tr>
                    <td>{{ $product->name }}</td>
                    <td>${{ $product->price }}</td>
                    <td>{{ $product->category }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    {{ $products->links() }}
</div>

What’s Happening Here?

wire:model.debounce.300ms="search": Binds the search input to the search property with a 300ms delay.
updatingSearch(): Resets pagination to the first page when the search query changes.

Step 5: Infinite Scrolling with Pagination

For modern applications, you can replace traditional pagination with infinite scrolling.

Example: Infinite Scroll

Install the livewire-ui package for infinite scrolling:


composer require livewire-ui/livewire-ui

Update ProductList.php:


use LivewireUI\InfiniteScroll\WithInfiniteScroll;

class ProductList extends Component
{
    use WithInfiniteScroll;

    public function render()
    {
        return view('livewire.product-list', [
            'products' => Product::paginate(10),
        ]);
    }
}

Update product-list.blade.php:


<div wire:infinite-scroll>
    @foreach ($products as $product)
        <div>{{ $product->name }}</div>
    @endforeach

    <button wire:click="loadMore">Load More</button>
</div>

Final Output

By implementing these pagination techniques, your Livewire component will:

Efficiently handle large datasets with pagination controls.
Provide dynamic updates with search and filter capabilities.
Enhance user experience with infinite scrolling.

Key Features Covered Today

Adding pagination to Livewire components with WithPagination.
Customizing pagination controls and views.
Combining pagination with search and filters.
Implementing infinite scrolling for modern applications.

About

Services

Contact

410 C, Jaina Tower-1, District Center, Janak Puri New Delhi-110058, India.