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.

php artisan serve

 


You might also like:

Recommended Post
Featured Post
How To Install Tailwind CSS In Laravel 9
How To Install Tailwind CSS In...

In this article, we will see how to install tailwind CSS in laravel 9. Tailwind CSS works by scanning all of y...

Read More

Jun-13-2022

Laravel whereHas and orWhereHas Query Example
Laravel whereHas and orWhereHa...

In this article, we will see the laravel whereHas and orWhereHas query example. whereHas and orWhereHas query is us...

Read More

Jan-19-2021

How To Import Export Excel & CSV File In Laravel 10
How To Import Export Excel & C...

In this article, we will see how to import and export Excel & CSV files in laravel 10. Here, we will learn about lar...

Read More

Mar-08-2023

How to Update User Profile in Laravel 11
How to Update User Profile in...

Hello, laravel developers! In this article, we'll see how to update user profiles in laravel 11. Here, we'll cha...

Read More

Jul-12-2024