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 thesearchproperty 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.