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.
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-pagination
Now, we will install the livewire package using the following command.
composer require livewire/livewire
In 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-pagination
After running the above command two files will be created below the path.
app/Http/Livewire/UserPagination.php
resources/views/livewire/user-pagination.blade.php
Now, 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 :
In this article, we will see how to auto select a country using IP lookup in jquery. Here, we will learn about auto...
May-15-2023
In this article, we will explore the integration of OpenAI into Laravel versions 8, 9, and 10. Our focus will be on unde...
Feb-06-2023
In this article, we will see how to use an array in React JS. We can use the JavaScript standard Array functio...
Aug-12-2022
In the dynamic world of web development, form validation is a crucial aspect of creating a user-friendly and error-free...
Sep-25-2023