Laravel Livewire Pagination with Search Step by Step

Laravel livewire search with pagination tutorial from scratch. Here, we will share with you how to create a livewire search with pagination in laravel app.

This laravel livewire search with a pagination tutorial will help you step by step on how to implement search functionality with pagination using livewire in laravel project.

Laravel Livewire Search with Pagination Tutorial

Follow below simple & easy steps to implement livewire search with pagination in laravel app:

Step 1: Install Laravel App
Step 2: Add Database Detail
Step 3: Create Model & Migration using Artisan
Step 4: Install Livewire Package
Step 5: Create Component using Artisan
Step 6: Add Route
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel App

First of all, Open your terminal OR command prompt and run following command to install laravel fresh app to create laravel livewire search with pagination project:

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

Step 2: Add Database Detail

In this step, Add database credentials in the .env file. So open your project root directory and find .env file. Then add database detail in .env file:

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

Step 3: Run Migration

In this step, generate model, migration and faker file using the following command:

 php artisan make:model Employee -fm

This command will create one model name Employee.php,create one migration that name create_employees_table.php and one faker file that name EmployeeFactory.php .

So, Navigate to database/migrations folder and open create_ employees_table.php file. Then update the following code into create_ employees_table.php file:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateEmployeesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('employees', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('employees');
    }
}

Now, you navigate to app\Providers folder and open AppServiceProvider.php file. And update the following code into AppServiceProvider.php file:

 use Illuminate\Support\Facades\Schema;
  
 public function boot()
 {
     Schema::defaultStringLength(191);
 }

Next, open your command prompt and run the following command to create the table into your database:

php artisan migrate

Next, Navigate to app/Employee.php and update the following code into your Employee.php model as follow:

<?php
 
namespace App;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model
{
    protected $guarded = [];
}

Next, Navigate to database/factories and open EmployeeFactory.php. Then update the following code into it as follow:

<?php

use Faker\Generator as Faker;

$factory->define(App\Employee::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'email' => $faker->unique()->safeEmail
    ];
});

After that, run the following command to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Employee::class,50)->create()
exit

Step 4: Install Livewire Package

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

composer require livewire/livewire

Step 5: Create Component using Artisan

In this step, create the livewire components for creating a livewire search with pagination component using the following command. So Open your cmd and run the following command:

php artisan make:livewire search-pagination

This command will create the following components on the following path:

app/Http/Livewire/SearchPagination.php
resources/views/livewire/search-pagination.blade.php

Now, Navigate to app/Http/Livewire folder and open SearchPagination.php file. Then add the following code into your SearchPagination.php file:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Employee;

class SearchPagination extends Component
{
    use WithPagination;
    public $searchTerm;

    public function render()
    {
        $searchTerm = '%'.$this->searchTerm.'%';

        return view('livewire.search-pagination',[
            'employees' => Employee::where('name','like', $searchTerm)->paginate(10)
        ]);
    }
}

After that, Navigate to resources/views/livewire folder and open search-pagination.blade.php file. Then add the following code into your search-pagination.blade.php file:

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

            <table class="table table-bordered" style="margin: 10px 0 10px 0;">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                @foreach($employees as $employee)
                <tr>
                    <td>
                        {{ $employee->name }}
                    </td>
                    <td>
                        {{ $employee->email }}
                    </td>
                </tr>
                @endforeach
            </table>
            {{ $employees->links() }}
        </div>
    </div>
</div>

Step 6: Add Route

In this step, Navigate to routes folder and open web.php. Then add the following routes into your web.php file:

Route::get('/search-with-pagination', function () {
    return view('livewire.home');
});

Step 7: Create View File

In this step, navigate to resources/views/livewire folder and create one blade view files that name home.blade.php file. Then add the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Livewire Search with Pagination - Tutsmake.com</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row mt-5 justify-content-center">
            <div class="mt-5 col-md-8">
                <div class="card">
                  <div class="card-header bg-primary">
                    <h2 class="text-white">Laravel Livewire Search with Pagination - Tutsmake.com</h2>
                  </div>

                    <div class="card-body">
                      @livewire('search-pagination')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

Note that, if you want to add HTML(blade views), CSS, and script code into your livewire files. So, you can use @livewireStyles, @livewireScripts, and @livewire(‘ blade views’).

Step 8: Run Development Server

Finally, you need to run the following PHP artisan serve command to start your laravel livewire search with pagination example app:

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080

Now, you are ready to run laravel livewire search with pagination app. So open your browser and hit the following URL into your browser:

http://localhost:8000/search-with-pagination

Your laravel livewire search with pagination app looks like:

Subscribe to Blog via Email