Laravel 5.3 - Customizing pagination templates with example

Posted 7 years ago By Ajay Gupta 146948

In this post, i am going to tell you how to customize pagination view in Laravel 5.3.

In most of the application, pagination is very common task and Laravel PHP Framework has excellent library for pagination and with version of Laravel 5.3, you can easily customize pagination template either creating a own pagination file manually or using exist option is to run artisan command to publish the pagination template.

And this is the new feature that is added with Laravel 5.3.

As all know Laravel has default bootstrap pagination view and i here let you know :

Basic example of pagination that use default pagination view

// routes file
Route::get('products', function () {
    return view('products.index')
        ->with('products', Product::paginate(20));
});

// resource/views/products/index.blade.php
@foreach ($products as $product)
    <!-- show the product details -->
@endforeach
{!! $products->links() !!}

// resource/views/products/index.blade.php
@foreach ($products as $product)
    <!-- show the product details -->
@endforeach

{!! $products->links() !!}

Above example will give you simple default Laravel pagination view.

Ok, Now i will tell you how to pass custom view for Laravel pagination.

Custom Pagination Template in Laravel 5.3

If you go through publish file using php artisan command then run following command :

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

By running above command you will see the pagination directory in following path resources/views/vendor/ and in pagination directory you will get 4 files by default:

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

Laravel use default.blade.php file for default pagination view.

You can manually create your own custom pagination template and link it with pagination links method to show pagination view as per your needs.

Complete example to create a custom pagination view

First you need to create a table with some dummy data to test this code.

Step 1: Table and Model

I have created a products table(fields : name, details) in our database with some data.

Now create a model corresponding to the table:

app/Product.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
    public $fillable=['name','details'];
}

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
    public $fillable=['name','details'];
}

Step2: Add route

In this step, simple add a new route for custom pagination in web.php

routes/web.php

Route::get('custom-pagination','ProductController@index');

Step3: Create ProductController.php

In this step create a ProductController.php with index method.

app/Http/Controllers/ProductController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
    public function index(Request $request){     
      $products=Product::paginate(5);
      return view('products',compact('products'))->with('i', ($request->input('page', 1) - 1) * 5);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Product;

class ProductController extends Controller
{
    public function index(Request $request){     
      $products=Product::paginate(5);
      return view('products',compact('products'))->with('i', ($request->input('page', 1) - 1) * 5);
    }
}

Step 4: Create products.blade.php file

In this step i have created a products.blade.php in following directory resources/views/products.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Customizing pagination templates with example in Laravel 5.3</title>
    <link rel="stylesheet" type="text/css" href="http://www.expertphp.in/css/bootstrap.css">
</head>
<body>
<div class="container">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
            <tr class="heading">
                <th>No</th>
                <th>Name</th>
                <th>Details</th>
            </tr>
            </thead>
            <tbody>
                @foreach ($products as $product)
                    <tr>
                        <td>{{ ++$i }}</td>
                        <td>{!! $product->name !!}</td>
                        <td>{!! $product->details !!}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {!! $products->links('pagination') !!}
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Customizing pagination templates with example in Laravel 5.3</title>
    <link rel="stylesheet" type="text/css" href="http://www.expertphp.in/css/bootstrap.css">
</head>
<body>
<div class="container">
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
            <tr class="heading">
                <th>No</th>
                <th>Name</th>
                <th>Details</th>
            </tr>
            </thead>
            <tbody>
                @foreach ($products as $product)
                    <tr>
                        <td>{{ ++$i }}</td>
                        <td>{!! $product->name !!}</td>
                        <td>{!! $product->details !!}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        {!! $products->links('pagination') !!}
    </div>
</div>
</body>
</html>

In above links method, i pass the view name pagination to identify which custom template i am going to use for pagination.

Step5: create a custom template pagination.blade.php

Now in this last step we will create a template which is used by a single paginator.

resources/views/pagination.blade.php

@if ($paginator->hasPages())
    <ul class="pager">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="disabled"><span>? Previous</span></li>
        @else
            <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">? Previous</a></li>
        @endif
        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="disabled"><span>{{ $element }}</span></li>
            @endif
            {{-- Array Of Links --}}
            @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
        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">Next ?</a></li>
        @else
            <li class="disabled"><span>Next ?</span></li>
        @endif
    </ul>
@endif

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

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="disabled"><span>{{ $element }}</span></li>
            @endif

            {{-- Array Of Links --}}
            @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

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

Show Demo

Laravel 5.3 - Customizing pagination templates with example

Tags :

Related Posts