Laravel 9 Livewire Pagination Example

In this article, we will see laravel 9 livewire pagination example. we will learn how to create a laravel livewire pagination using the default laravel pagination method with livewire components.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

Also, we will install livewire using the composer command. Livewire offers the ability to paginate results within a component.

So, let’s see pagination in laravel 9.

livewire pagination in laravel 9

Step 1: Install Laravel 9

Step 2: Install Livewire Package

Step 3: Create Dummy Records using Tinker Factory

Step 4: Create Livewire Pagination Component

Step 5: Create Route

Step 6: Create View File

Step 1: Install Laravel 9

In this step, we will install laravel 9 using the following command.

composer create-project laravel/laravel laravel-livewire-pagination

Step 2: Install Livewire Package

Now, we will install the livewire package using the following command.

composer require livewire/livewire

Step 3: Create Dummy Records using Tinker Factory

In this step, we will create dummy data into the user’s table using the tinker.

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

Step 4: Create Livewire Pagination Component

Now, we will create a livewire pagination component using the following command.

php artisan make:livewire user-pagination

After running the above command two files will be created below the path.

app/Http/Livewire/UserPagination.php

resources/views/livewire/user-pagination.blade.php

Now, we will update the app/Http/Livewire/UserPagination.php file.

<?php
  
namespace App\Http\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(20),
        ]);
    }
}

Read Also: Pagination Example In Laravel

After that, we will update the resources/views/livewire/user-pagination.blade.php file.

<div>
    <table class="table-auto" style="width: 100%;">
      <thead>
        <tr>
          <th class="px-4 py-2">ID</th>
          <th class="px-4 py-2">Name</th>
          <th class="px-4 py-2">Email</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($users as $user)
            <tr>
            <td class="border px-4 py-2">{{ $user->id }}</td>
            <td class="border px-4 py-2">{{ $user->name }}</td>
            <td class="border px-4 py-2">{{ $user->email }}</td>
            </tr>
        @endforeach
      </tbody>
    </table>
  
    {{ $users->links() }}
</div>

Step 5: Create Route

In this step, we will add routes in the web.php file.

Route::get('index', function () {
    return view('index');
});

Step 6: Create View File

Now, we will create a blade file. This file will use @livewireStyles, @livewireScripts, and @livewire(‘contact-form’).

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Livewire Pagination Example - Websolutionstuff</title>
    @livewireStyles
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.0/tailwind.min.css"/>
</head>
<body>    
<div class="container">    
    <div class="card">
      <div class="card-header">
        Laravel 9 Livewire Pagination Example - Websolutionstuff
      </div>
      <div class="card-body">
        @livewire('user-pagination')
      </div>
    </div>        
</div>    
</body>  
@livewireScripts  
</html>

You might also like :

Read Also: How To Install VueJs In Laravel
Read Also: Laravel 9 CRUD Operation Example
Read Also: Laravel 9 User Role and Permission
Read Also: Laravel 8 REST API With Passport Authentication

If this post was helpful, please click the clap 👏 button below. A few times to show your support!

Laravel 9 Livewire Pagination Example

livewire pagination in laravel 9

More from Websolutionstuff

Get the Medium app

Websolutionstuff