Laravel Custom Pagination

In this tutorial, I will discuss the Laravel pagination example. In this tutorial, I am going to tell you how to build and apply a new custom paginator view in the Laravel 8 application. Laravel 5.3 added new features and updates for easily customizing your own manual pagination blade template.

By default, Laravel provides very simple pagination. But in this tutorial, we will create our own custom pagination. But if you are not using bootstrap pagination and you want to customize then you can simply change OR if you want to add a new bootstrap pagination layout then you can follow this laravel custom pagination tutorial.

I will simply create some dummy users and then using those users I will show our custom pagination page. I will use laravel custom pagination template to do this custom pagination in laravel 8.

Step 1: CreatePagination Template

As we are going to use laravel custom pagination template, that's why run the below command to have it.

php artisan vendor:publish --tag=laravel-pagination

After running the above command run you will get a new folder "pagination" on views files(resources/views/vendor). In the pagination folder you will get the following files by default:

default.blade.php
bootstrap-4.blade.php
simple-bootstrap-4.blade.php
simple-default.blade.php
semantic-ui.blade.php

But we are going to use our own custom pagination template. We don't use any of the above templates

Step 2: Add Route

Now we need routes to see our pagination page. So create this route and create some dummy data of users.

routes/web.php

Route::get('/', 'TestController@index');

Step 3: Add Controller

Ok, now we have to add a new controller method "index()" in your TestController, so if you haven't created TestController then you can create it and paste the following code.

app/Http/Controllers/TestController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index(){
    	$users = \App\User::paginate(7);
    	
        return view('welcome',compact('users'));
    }
}

Step 4: Create Blade File

Now we need to create our blade file for users' view and custom pagination template. So create it with the following path.

resources/views/vendor/pagination/custom.blade.php

@if ($paginator->hasPages())
    <ul class="pagination">
       
        @if ($paginator->onFirstPage())
            <li class="disabled"><span>← Previous</span></li>
        @else
            <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">← Previous</a></li>
        @endif


        @foreach ($elements as $element)
           
            @if (is_string($element))
                <li class="disabled"><span>{{ $element }}</span></li>
            @endif


            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li class="active my-active"><span>{{ $page }}</span></li>
                    @else
                        <li><a href="{{ $url }}">{{ $page }}</a></li>
                    @endif
                @endforeach
            @endif
        @endforeach


        
        @if ($paginator->hasMorePages())
            <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">Next →</a></li>
        @else
            <li class="disabled"><span>Next →</span></li>
        @endif
    </ul>
@endif

At last, we have to create the welcome.blade file and we will use our custom pagination template. So let's create a welcome page.

resources/views/welcome.blade.php

@extends('layouts.app')
@push('style')
	<style type="text/css">
		.my-active span{
			background-color: #5cb85c !important;
			color: white !important;
			border-color: #5cb85c !important;
		}
	</style>
	<link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
@endpush
@section('content')
<div class="container"><div class="row justify-content-center">
            <div class="col-md-8"><div class="card"> 
                      <table class="table table-stripped">
                      	<thead>
                      		<tr>
                      			<th>No</th>
                      			<th>Name</th>
                      			<th>Email</th>
                      		</tr>
                      	</thead>
                      	<tbody>
                      		@forelse($users as $user)
                      		<tr>
                      			<td>{{ $loop->index + 1 }}</td>
                      			<td>{{ $user->name }}</td>
                      			<td>{{ $user->email }}</td>
                      		</tr>
                      		@empty
                      		<p>No user found!</p>
                      		@endforelse
                      	</tbody>
                    </table>
                 {{ $users->links('vendor.pagination.custom') }}
             </div></div></div></div>
 @stop