Laravel 9 Livewire Pagination Example

Websolutionstuff | Sep-29-2022 | Categories : Laravel

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),
        ]);
    }
}

 

 

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 :

Recommended Post
Featured Post
Laravel 8 Has Many Through Relationship Example
Laravel 8 Has Many Through Rel...

In this example we will see laravel 8 has many through relationship example. hasManyThrough relationship difficult to un...

Read More

Nov-17-2021

Laravel Accessor and Mutator Example
Laravel Accessor and Mutator E...

In this article, we will see the laravel accessor and mutator example. Here, we will learn what is accessor an...

Read More

Mar-16-2021

How To Send Email In Laravel 9 Using Mailgun
How To Send Email In Laravel 9...

In this article, how to send email in laravel 9 using mailgun. we will learn laravel 9 to send emails using mailgun...

Read More

Jul-29-2022

Laravel Authentication Using Breeze
Laravel Authentication Using B...

In this article, we will share you new information about laravel authentication using a breeze. Laravel Breeze...

Read More

Feb-05-2021