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:

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

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

@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. ?

---