Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Laravel pagination with search

How to use Laravel pagination with search ?

Aman Jain, February 22, 2022November 19, 2023

In this tutorial we will learn pagination in Laravel. Laravel provides its own library to build the pagination html, which we can easily use in our html page using $model->links() method and $model->paginate() method to make a long list into pagination. Thus in this tutorial i will show you to use the existing Laravel pagination with search.

Basically pagination is useful when we have lots of data and we wanted to show it on a single page but if we load all data in once then it can break the functionality of our application so we will use pagination to load the data in chunk.

In this example i will use bootstrap to show better UI with pagination and Laravel pagination to show pagination.

So, let’s begin the tutorial

Step 1: Create a laravel project

First step is to create the Laravel 8 project using composer command or you can also read the How to install laravel 8 ? and Laravel artisan command to generate controllers, Model, Components and Migrations

composer create-project laravel/laravel example-app

Step 2: Configure database

Next step is to configure the database for our project, table and data. So open .env or if file not exist then rename .env.example file to .env file in root folder and change below details

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=

Step 3: Create Model, Migration and Seeders

If you have table and large data already then you can skip this step but if you are beginner and trying to implement pagination then pagination required model, large dataset in table so in this step we are creating a model and migration using artisan command

php artisan make:model Article -m

Above command will create two files one is migration and other one is model. open migration file which is located at database/migrations/timestamp_create_articles_table.php and edit the schema as below

  public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->string('email')->unique();;
            $table->string('title');
            $table->string('body');
            $table->timestamps();
        });
    }

Run migration using artisan command in command line

php artisan migrate

Output of above command

Migrating: 2021_11_27_112800_create_articles_table
Migrated:  2021_11_27_112800_create_articles_table (45.63ms)

Now create seeder in database/seeders/DatabaseSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

// Import DB and Faker services
use Illuminate\Support\Facades\DB;
use Faker\Factory as Faker;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $faker = Faker::create();

    	for ($i=0;$i<=100;$i++) {
            DB::table('articles')->insert([
                'title' => $faker->name,
                'body' => $faker->text,
                'email' => $faker->email,
                'updated_at' =>$faker->datetime,
                'created_at' => $faker->datetime              
            ]);
        }
        
    }
}

Run Seeder in command line

php artisan db:seed

Step 4 : Create a controller

Create the controller and add the necessary imports and class. You can create by Laravel artisan or manually.

php artisan make:controller ArticleController

Now, add the controller logic for pagination

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Article;


class ArticleController extends Controller
{
    public function index(Request $request)
    {

        $articles=Article::when($request->has("title"),function($q)use($request){
            return $q->where("title","like","%".$request->get("title")."%");
        })->paginate(5);
      
        return view('articles.article ',['articles'=>$articles]);
    }
}

Here, i used Article model to paginate the data and then sent the data ti article template.

Step 5 : Create the views

Create two views one for full page and other for list with pagination therefore creating views in resource/articles/article.blade.php and resource/articles/article-pagination.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Readerstacks laravel 8 pagination with search </title>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body class="antialiased">
  <div class="container">
    <!-- main app container -->
    <div class="readersack">
      <div class="container">
        <div class="row">
          <div class="col-md-12 ">
            <h3>Laravel 8 pagination with search - Readerstacks</h3>
            <a class='btn btn-info' href='{{url("articles/form")}}'>Add New</a>
            <div id="search">

              <form id="searchform" name="searchform">
                <div class="form-group">
                  <label>Search by Title</label>
                  <input type="text" name="title" value="{{request()->get('title','')}}" class="form-control" />
                 

                </div>
                <div class="form-group">
                  <label>Search by body</label>
                  <input type="text" name="body" value="{{request()->get('body','')}}" class="form-control" />


                </div>
                <button class='btn btn-success' >Search</button>
              </form>


            </div>
            <div id="pagination_data">
              <table class="table table-striped table-dark table-bordered">
                <tr>
                  <th>Sr No.</th>
                  <th>Title</th>

                  <th>Body</th>

                  <th>Date</th>
                </tr>
                @foreach($articles as $article)
                <tr>
                  <td>{{$article->id}}</td>
                  <td>{{$article->title}}</td>

                  <td>{{substr($article->body,0,50)}}</td>
                  <td>{{$article->created_at}}</td>
                </tr>
                @endforeach
              </table>
              <div id="pagination">
                {{ $articles->links() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- credits -->
    <div class="text-center">
      <p>
        <a href="#" target="_top">Laravel 8 pagination with search
        </a>
      </p>
      <p>
        <a href="https://readerstacks.com" target="_top">readerstacks.com</a>
      </p>
    </div>
  </div>
  
</body>

</html>

Here is the main code where we called $articles->links() and foreach loop to show the data.

<table class="table table-striped table-dark table-bordered">
  <tr>
    <th>Sr No.</th>
    <th>Title</th>

    <th>Body</th>

    <th>Date</th>
  </tr>
  @foreach($articles as $article)
  <tr>
    <td>{{$article->id}}</td>
    <td>{{$article->title}}</td>

    <td>{{$article->body}}</td>
    <td>{{$article->created_at}}</td>
  </tr>
  @endforeach
</table>
<div id="pagination">
  {{ $articles->links() }}
</div>

Step 6 : Create Routes

Second step is to create the routes to show the form and submit the form

<?php

use Illuminate\Support\Facades\Route;
use \App\Http\Controllers\ArticleController;


Route::get('/articles',[ArticleController::class, 'index']); 

Run and final output:

Laravel pagination with search
Laravel pagination with search
Laravel pagination with search
Laravel pagination with search
Laravel 8 pagination with search

Adding extra params to Laravel pagination

Sometimes we wanted to add extra params to links for example per page parameter to every page then we can use appends method.

{!! $articles->appends(['per_page' => '20'])->links() !!}

Using bootstrap in Laravel pagination

By default Laravel use Tailwind views and Laravel also support bootstrap, so to change this behavior we need to call useBootstrap method within the boot method of your App\Providers\AppServiceProvider

<?php

namespace App\Providers;
use Illuminate\Support\ServiceProvider;

use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}

Related

Php Laravel bootstraplaravelpaginationphp

Post navigation

Previous post
Next post

Related Posts

Php Laravel Rest Api OTP Login and Registration Without Password

Laravel Rest Api OTP Login and Registration Without Password

September 3, 2022March 16, 2024

Today most of the applications are using laravel rest api otp login and registration without password for ease of login and registration and also provides easy to login without remembering the password each time while login or register. In Laravel there is multiple ways to implement the login and registration…

Read More
Php How to Add Values to Request Array in Laravel

How to Add Values to Request Array in Laravel ?

August 9, 2022March 16, 2024

In laravel to get the request data we use request class or function but sometimes we want to add values to request array in laravel, so to add extra values or we can say to merge to our own custom values to laravel request array we need to use merge…

Read More
Php Create multi language website in Laravel

How to create multi language website in Laravel 5 / 6 / 7 with example?

May 10, 2022May 10, 2022

Laravel provides its own localization library to handle the multi language feature in application. Laravel stores each languages translations in resource/lang . If you are going to build a full featured multi language website then you are at right place to end your search. In this article i will show…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • The Resilience of Nature: How Forests Recover After Fires
  • Understanding Laravel Cookie Consent for GDPR Compliance
  • Understanding High Vulnerabilities: A Critical Overview of the Week of May 12, 2025
  • Installing a LAMP Stack on Ubuntu: A Comprehensive Guide
  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version