Hello, laravel web developers! This article will show how to add pagination in laravel 11 Livewire. Here, we'll learn to add without page refresh laravel 11 livewire pagination. Livewire offers the ability to paginate results within a component.
In Laravel Livewire, you can use the paginate() method to add pagination. Also, you can reset after the filtering data using the resetPage() function.
Additionally, you can add multiple paginations on the same page and also customize them as per the requirements.
How to add Pagination in Laravel 11 Livewire
In this step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel example-app
Then, we'll create some dummy records using the following command.
php artisan tinker
User::factory()->count(100)->create()
Next, we'll install Laravel Livewire using the following command.
composer require livewire/livewire
Then, we'll create a pagination component using the following command.
php artisan make:livewire user-pagination
This command will generate two files as per the below path
app/Http/UserPagination.php
resources/views/livewire/user-pagination.blade.php
app/Livewire/UserPagination.php
<?php
namespace App\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(10),
]);
}
}
resources/views/livewire/user-pagination.blade.php
<div>
<table class="table table-bordered">
<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('pagination::bootstrap-5') }}
</div>
Then, we'll define the routes in the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('user-pagination', function () {
return view('default');
});
Next, we'll create a blade file and use @livewireStyles, @livewireScripts and @livewire('contact-form').
resources/views/default.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to add Pagination in Laravel 11 Livewire - Websolutionstuff</title>
@livewireStyles
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3">How to add Pagination in Laravel 11 Livewire - Websolutionstuff</h3>
<div class="card-body">
@livewire('user-pagination')
</div>
</div>
</div>
</body>
@livewireScripts
</html>
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like:
In this article, we will see require ext-curl * is missing from your system in ubuntu. When we set up the laravel 9...
Feb-16-2023
As a React JS developer, I have come to appreciate the power and popularity of this remarkable JavaScript library. Its c...
Aug-09-2023
In this example, we will delve into the process of performing file uploads using Node.js. This tutorial will provide you...
Jul-26-2021
Hello, laravel web developers! In Laravel, the Query Builder is a powerful tool for building database queries, but somet...
Oct-11-2024