Laravel Custom Pagination Design in Blade View
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
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">«</span>
</a>
</li>
<li>
<a href="{{ $paginator->url($paginator->currentPage() - 1) }}" aria-label="Previous">
<span aria-hidden="true">‹</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">›</span>
</a>
</li>
<li>
<a href="{{ $paginator->url($paginator->lastpage()) }}" aria-label="Last">
<span aria-hidden="true">»</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. ?Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.