How to create Livewire Pagination in Laravel
Today we will create How to create Livewire Pagination in Laravel. I will give a very simple example of laravel livewire pagination tutorial. When the user implements a laravel livewire pagination, he gets some error. So In this tutorial, I will give a simple example of How to install Livewire Pagination. I will give you a very simple example of creating pagination with a user’s table.
Also, You can use laravel livewire pagination with laravel 6, laravel 7, laravel 8 and laravel 9 versions.
How to create Livewire Pagination in Laravel
Table of concept
- Install Livewire
- Create Component
- Create a Route
- Create a View File
Also read: How to create Livewire Datatables Using Laravel
1. Install Livewire
We will install livewire to our laravel 9 application using the below command:
composer require livewire/livewire2. Create Component
Now, we will create a livewire component using the below command.
php artisan make:livewire users-paginationthe above command creates a pagination component. and they created two files:
CLASS: app/Http/Livewire//UsersPagination.php
VIEW: E:\xampp\htdocs\practise\resources\views/livewire/users-pagination.blade.phpNow we will update both files.
Also read: How to create a Livewire Form in Laravel
<?php
#app\Http\Livewire\UsersPagination.php
namespace App\Http\Livewire;
use Livewire\WithPagination; //Added
use App\Models\User; //Added
use Livewire\Component;
class UsersPagination extends Component
{
use WithPagination; //Added
public function render()
{
return view('livewire.users-pagination',
//Added
[
'users' => User::paginate(10),
]
);
}
}resources\views\livewire\users-pagination.blade.php
<div>
<table class="table-auto" style="width: 100%;">
<thead>
<tr>
<th class="border py-2">Name</th>
<th class="border py-2">Email</th>
<th class="border py-2">Created At</th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td class="border py-2">{{ $user->name }}</td>
<td class="border py-2">{{ $user->email }}</td>
<td class="border py-2">{{ \Carbon\Carbon::createFromTimeStamp(strtotime($user->created_at))->diffForHumans() }}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>3. Create a Route
Now we will create one route for calling our example.
#routes/web.php
Route::get('users-pagination', function () {
return view('users.index');
});4. Create a View File
Last, we will create a blade file for the call form route. in this file, we will use @livewireStyles and @livewireScripts.
resources/views/users/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to create Livewire Pagination in Laravel</title>
@livewireStyles
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.2/tailwind.min.css">
<style>
h1 {
font-size: 32px;
}
.container {
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class=" container">
<h1>How to create Livewire Pagination in Laravel</h1>
@livewire('users-pagination')
</div>
</body>
@livewireScripts
</html>
