How to use the pagination in Laravel Livewire with the Functional version not class based?
To use pagination in Laravel Livewire with the functional version (not class-based), you can follow these steps:
- Fetch the data from the database using the
useLivewire
andLivewire
facades, and apply thepaginate
method to the data.
<?php
namespace App\Http\Livewire\Functional;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
class PaginationFunctional extends Component
{
use WithPagination;
public function render()
{
return view('livewire.functional.pagination', [
'users' => User::latest()->paginate(5),
]);
}
}
- In your blade view file, you need to use the
@livewireStyles
and@livewireScripts
directives to include the Livewire CSS and JavaScript files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@livewireStyles
<title>Pagination Functional</title>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>
@livewireScripts
</body>
</html>
- In the
render
method of your Livewire component, you need to pass the paginated data to the view file.
public function render()
{
return view('livewire.functional.pagination', [
'users' => User::latest()->paginate(5),
]);
}
- Finally, in your blade view file, you can use the
$users
variable to display the paginated data and the$users->links()
method to display the pagination links.
{{ $users->links() }}
That's it! You have successfully implemented pagination in Laravel Livewire with the functional version.