Mrunali Khandekar
Mrunali Khandekar

Mrunali Khandekar

Laravel Pagination in 4 just steps.

Laravel Pagination in 4 just steps.

Mrunali Khandekar's photo
Mrunali Khandekar
·Jan 2, 2021·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

In this tutorial we will see pagination. We will display only 5 records fetched from database and when user clicks on next button remaining 5 records will be display and also when there are no more records next button will be displayed and previous button will be enabled.

Let's start this tutorial.

1) Create a laravel project. Run below command in your terminal.

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

The above command will install latest version of laravel.

Basic Steps

1) Create a Database.

2)Set Database credentials in the .env file.

Now we will create a table that contains some records to display in pagination.

2) Create a table using below command.

php artisan make:model Records -m

Go to Records.php file in app/Models/Records.php file. Add the name of the columns as mentioned below.


namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Records extends Model
    use HasFactory;

    protected $fillable = ['title'];


Go to database/migrations/create_records_table.php and the columns name.

  public function up()
        Schema::create('records', function (Blueprint $table) {

Now the migrate the table using below command.

php artisan migrate

3) Now set the route as below in routes/web.php

Route::get('/', function () {
    $titles = \App\Models\Records::simplePaginate(3);
    return view('welcome',compact('titles '));

4) Go to welcome.blade.php file in resources/views/welcome.blade.php and add below code

<!DOCTYPE html>
        #customers {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;

        #customers td, #customers th {
            border: 1px solid #ddd;
            padding: 8px;

        #customers tr:nth-child(even){background-color: #f2f2f2;}

        #customers tr:hover {background-color: #ddd;}

        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #4CAF50;
            color: white;

<table id="customers">
    @foreach($titles as $row)


Open the website and you will see output as below with next and previous button.

Screenshot_2021-01-02 Screenshot.png

Did you find this article valuable?

Support Mrunali Khandekar by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this