Laravel Custom Pagination Design in Blade View

Published on June 2, 2021 1 min read

Hello artisans, sometimes we need to design pagination with our custom design. We can override deafult pagination styles but we can design easily without overriding default pagination styles. Let’s get started:

Table of Contents

  1. Create a Pagination Template
  2. Include Custom Pagination

Create a Pagination Template

Go to resources>views folder and create a file named pagination.blade.php. Then paste the code in that file:

pagination.blade.php
@if (isset($paginator) && $paginator->lastPage() > 1)
  <ul class="pagination">
    @php
      $interval = isset($interval) ? abs(intval($interval)) : 3 ;
      $from = $paginator->currentPage() - $interval;
      if($from < 1){
        $from = 1;
      }
      
      $to = $paginator->currentPage() + $interval;
      if($to > $paginator->lastPage()){
        $to = $paginator->lastPage();
      }
    @endphp
    <!-- first/previous -->
    @if($paginator->currentPage() > 1)
    <li>
      <a href="{{ $paginator->url(1) }}" aria-label="First">
      <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li>
      <a href="{{ $paginator->url($paginator->currentPage() - 1) }}" aria-label="Previous">
      <span aria-hidden="true">&lsaquo;</span>
      </a>
    </li>
    @endif
    <!-- links -->
    @for($i = $from; $i <= $to; $i++)
    @php 
      $isCurrentPage = $paginator->currentPage() == $i;
    @endphp
    <li class="{{ $isCurrentPage ? 'active' : '' }}">
      <a href="{{ !$isCurrentPage ? $paginator->url($i) : '#' }}">
      {{ $i }}
      </a>
    </li>
    @endfor
    <!-- next/last -->
    @if($paginator->currentPage() < $paginator->lastPage())
    <li>
      <a href="{{ $paginator->url($paginator->currentPage() + 1) }}" aria-label="Next">
      <span aria-hidden="true">&rsaquo;</span>
      </a>
    </li>
    <li>
      <a href="{{ $paginator->url($paginator->lastpage()) }}" aria-label="Last">
      <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
    @endif
  </ul>
@endif

The usage of this template:

@include('pagination', ['paginator' => $users])
{{-- we can set interval too --}}
@include('pagination', ['paginator' => $users, 'interval' => 3])

Include Custom Pagination

We have created our custom pagination template. Now we can inlcude it in any template where needed. Let’s have a look at an example.

UserController.php
<?php

namespace App\Http\Controllers;

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

class UserController extends Controller
{
  /**
   * users.
   */
  public function index()
  {
    $users = User::paginate(10);
    
    return view('users', compact('users'));
  }
}

In users.blade.php file, let’s set our custom pagination:

users.blade.php
@extends('layouts.app')

@section('content')
<div class="container">

    @foreach($users as $user)
        {{-- $user->name --}}
    @endforeach

    {{-- pagination --}}
    @include('pagination', ['paginator' => $users])

</div>
@endsection

Credit: The solution is made by Carlos Alberto Bertholdo Carucce.

That’s all. Thanks for reading. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write article on Laravel, Linux server, modern JavaScript and more on web development.

Follow