Laravel 8.x Custom Pagination Example Tutorial

 Step 1: CreatePagination Template

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

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

PHP

 

After running above command run you will get new folder "pagination" on views files(resources/views/vendor). In pagination folder you will get 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 template. 

 

Step 2: Add Route

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

routes/web.php

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

PHP

  

Step 3: Add Controller 

Ok, now we have to add new controller method "index()" in your TestController, so if you haven't created TestController then you can create it and paste this 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'));
    }
}

PHP

 

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="pager">
       
        @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 

HTML

  

At last we have to create welcome.blade.php file and we will use our custom pagination template. So let's create welcome page and put bellow code on it.

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

HTML