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
Require ext-curl is missing from your system ubuntu
Require ext-curl is missing fr...

In this article, we will see require ext-curl * is missing from your system in ubuntu. When we set up the laravel 9...

Read More

Feb-16-2023

How To Get Current URL In React JS
How To Get Current URL In Reac...

As a React JS developer, I have come to appreciate the power and popularity of this remarkable JavaScript library. Its c...

Read More

Aug-09-2023

How To File Upload Using Node.js
How To File Upload Using Node....

In this example, we will delve into the process of performing file uploads using Node.js. This tutorial will provide you...

Read More

Jul-26-2021

Laravel Query Builder with Macros & Higher-Order Functions
Laravel Query Builder with Mac...

Hello, laravel web developers! In Laravel, the Query Builder is a powerful tool for building database queries, but somet...

Read More

Oct-11-2024