Laravel 9 Livewire Pagination with Search Example

by

Throughtout this Laravel 9 Livewire pagination example tutorial, we will learn step by step on how to create bootstrap pagination with search funcationality in the Laravel application using Livewire package.

This tutorial will guide you from scratch about how to implement a bootstrap pagination with search using the help of the livewire package in the laravel application. You can use laravel livewire pagination with laravel 6, laravel 7, laravel 8 and laravel 9 version.

Laravel Livewire Pagination with Search Example

This quick and simple tutorial offers you a facile example of a pagination using bootstrap UI design in laravel app with livewire library.

Use to the following steps to implement pagination example with search funcationality in laravel 9 app with livewire:

  • Step 1: Install Laravel App
  • Step 2: Connect App to Database
  • Step 3: Install Livewire Package
  • Step 4: Create User Pagination Component
  • Step 5: Make Routes Livewire Pagination
  • Step 6: Render Pagination in Blade View
  • Step 7 : Create Dummy Records using Tinker Factory
  • Step 8: Run Development Server

Install Laravel App

First run the following command in terminal to install laravel fresh app for laravel livewire pagination with search example app.

composer create-project --prefer-dist laravel/laravel laravel-livewire

Go into the app:

cd laravel-livewire

Configure Database Credentials

Open the .env file and add your database credentials such as database name, username equally important password:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Install Livewire Package

In this step, we need to install livewire package to laravel project using the following command:

composer require livewire/livewire

Create User Pagination Component

Go to console run the artisan command to create the livewire components:

php artisan make:livewire user-pagination

The above command generated two files on the following path:

app/Http/Livewire/UserPagination.php
resources/views/livewire/user-pagination.blade.php

Go ahead and place the below code in 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;
    public $searchTerm;
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        $searchTerm = '%'.$this->searchTerm.'%';
        return view('livewire.user-pagination', [
            'users' => User::where('name','like', $searchTerm)->paginate(10),
        ]);
    }
}

Next, open resources/views/livewire/user-pagination.blade.php file, add the following code:

<div class="container">
  <input type="text"  class="form-control" placeholder="Search" wire:model="searchTerm" />

    <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>

Make Routes Livewire Pagination

Open routes/web.php file and define the route to access the multistep form from view:

Route::get('user-pagination', function () {
    return view('default');
});

Render Pagination in Blade View

Add below code in resources/views/default.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example </title>
    @livewireStyles
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.0/tailwind.min.css" integrity="sha512-wOgO+8E/LgrYRSPtvpNg8fY7vjzlqdsVZ34wYdGtpj/OyVdiw5ustbFnMuCb75X9YdHHsV5vY3eQq3wCE4s5+g==" crossorigin="anonymous" />
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-header">
        Laravel Livewire Example
      </div>
      <div class="card-body">
        @livewire('user-pagination')
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
</html>

Create Dummy Records using Tinker Factory

Next, Navigate to database/factories and open UserFactory.php here the code which will generate dummy records using tinker factory command.

So, you just need to run the following command to generate fake data using faker as follow:

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

Run Development Server

Finally, we need to run the following PHP artisan serve command to start laravel livewire pagination example app:

php artisan serve
If we want to run the project diffrent port so use this below command 
php artisan serve --port=8080

Next, open browser and hit the following URL into browser:

http://localhost:8000/user-pagination

The Laravel Livewire pagination with search Example Tutorial is over; in this tutorial, we learned the easiest way to integrate pagination with sarch example in laravel application using the livewire library.