In this article, we will see laravel 9 livewire pagination example. we will learn how to create a laravel livewire pagination using the default laravel pagination method with livewire components. Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. Also, we will install livewire using the composer command. Livewire offers the ability to paginate results within a component.
So, let's see pagination in laravel 9.
livewire pagination in laravel 9
Step 1: Install Laravel 9
Step 2: Install Livewire Package
Step 3: Create Dummy Records using Tinker Factory
Step 4: Create Livewire Pagination Component
Step 5: Create Route
Step 6: Create View File
In this step, we will install laravel 9 using the following command.
composer create-project laravel/laravel laravel-livewire-paginationNow, we will install the livewire package using the following command.
composer require livewire/livewireIn this step, we will create dummy data into the user's table using the tinker.
php artisan tinker
User::factory()->count(200)->create()Now, we will create a livewire pagination component using the following command.
php artisan make:livewire user-paginationAfter running the above command two files will be created below the path.
app/Http/Livewire/UserPagination.php
resources/views/livewire/user-pagination.blade.phpNow, we will update the app/Http/Livewire/UserPagination.php file.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
class UserPagination extends Component
{
use WithPagination;
/**
* Write code on Method
*
* @return response()
*/
public function render()
{
return view('livewire.user-pagination', [
'users' => User::paginate(20),
]);
}
}After that, we will update the resources/views/livewire/user-pagination.blade.php file.
<div>
<table class="table-auto" style="width: 100%;">
<thead>
<tr>
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Email</th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td class="border px-4 py-2">{{ $user->id }}</td>
<td class="border px-4 py-2">{{ $user->name }}</td>
<td class="border px-4 py-2">{{ $user->email }}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>In this step, we will add routes in the web.php file.
Route::get('index', function () {
return view('index');
});Now, we will create a blade file. This file will use @livewireStyles, @livewireScripts, and @livewire('contact-form').
resources/views/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Livewire Pagination Example - Websolutionstuff</title>
@livewireStyles
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.0/tailwind.min.css"/>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
Laravel 9 Livewire Pagination Example - Websolutionstuff
</div>
<div class="card-body">
@livewire('user-pagination')
</div>
</div>
</div>
</body>
@livewireScripts
</html>You might also like :
- Read Also: How To Install VueJs In Laravel
- Read Also: Laravel 9 CRUD Operation Example
- Read Also: Laravel 9 User Role and Permission
- Read Also: Laravel 8 REST API With Passport Authentication
