How to add Pagination in Laravel 11 Livewire

Websolutionstuff | Jun-14-2024 | Categories : Laravel

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

how to add pagination in laravel 11 livewire

Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel example-app

Step 2: Create Dummy Records

Then, we'll create some dummy records using the following command.

php artisan tinker
  
User::factory()->count(100)->create()

Step 3: Install Livewire

Next, we'll install Laravel Livewire using the following command.

composer require livewire/livewire

Step 4: Create Component

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>

Step 5: Define Route

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');
});

Step 6: Create View File

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>

Step 7: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.