Laravel 5.3 – Customizing pagination templates with example

Leave a Comment / php / By

Laravel 5.3 – Customizing pagination templates with example

In this post we will give you information about Laravel 5.3 – Customizing pagination templates with example. Hear we will give you detail about Laravel 5.3 – Customizing pagination templates with exampleAnd how to use it also give you demo for it if it is necessary.

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

  1. // routes file
  2. Route::get('products',function(){
  3. returnview('products.index')
  4. ->with('products', Product::paginate(20));
  5. });
  1. // resource/views/products/index.blade.php
  2. @foreach($productsas$product)
  3. <!-- show the product details -->
  4. @endforeach
  6. {!!$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

  1. <?php
  2. namespace App;
  3. use IlluminateDatabaseEloquentModel;
  4. class Product extends Model
  5. {
  6.     public $fillable=['name','details'];
  7. }
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
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

  1. <?php
  3. namespace AppHttpControllers;
  5. use IlluminateHttpRequest;
  7. use AppProduct;
  9. class ProductController extends Controller
  10. {
  11.     public functionindex(Request $request){     
  12.       $products=Product::paginate(5);
  13.       returnview('products',compact('products'))->with('i',($request->input('page',1)-1)*5);
  14.     }
  15. }
<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

use AppProduct;

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

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4.     <title>Customizing pagination templates with example in Laravel 5.3</title>
  5.     <linkrel="stylesheet"type="text/css"href="http://www.onlinecode.org/css/bootstrap.css">
  6. </head>
  7. <body>
  8. <divclass="container">
  9.     <divclass="table-responsive">
  10.         <tableclass="table table-bordered">
  11.             <thead>
  12.             <trclass="heading">
  13.                 <th>No</th>
  14.                 <th>Name</th>
  15.                 <th>Details</th>
  16.             </tr>
  17.             </thead>
  18.             <tbody>
  19.                 @foreach ($products as $product)
  20.                     <tr>
  21.                         <td>{{ ++$i }}</td>
  22.                         <td>{!! $product->name !!}</td>
  23.                         <td>{!! $product->details !!}</td>
  24.                     </tr>
  25.                 @endforeach
  26.             </tbody>
  27.         </table>
  28.         {!! $products->links('pagination') !!}
  29.     </div>
  30. </div>
  31. </body>
  32. </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.onlinecode.org/css/bootstrap.css">
</head>
<body>
<div >
    <div >
        <table >
            <thead>
            <tr >
                <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

  1. @if($paginator->hasPages())
  2. <ul class="pager">
  3. {{-- Previous Page Link --}}
  4. @if($paginator->onFirstPage())
  5. <li class="disabled"><span>? Previous</span></li>
  6. @else
  7. <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">? Previous</a></li>
  8. @endif
  10. {{-- Pagination Elements --}}
  11. @foreach($elementsas$element)
  12. {{--"Three Dots" Separator --}}
  13. @if(is_string($element))
  14. <li class="disabled"><span>{{$element}}</span></li>
  15. @endif
  17. {{-- Array Of Links --}}
  18. @if(is_array($element))
  19. @foreach($elementas$page=>$url)
  20. @if($page==$paginator->currentPage())
  21. <li class="active my-active"><span>{{$page}}</span></li>
  22. @else
  23. <li><a href="{{ $url }}">{{$page}}</a></li>
  24. @endif
  25. @endforeach
  26. @endif
  27. @endforeach
  29. {{-- Next Page Link --}}
  30. @if($paginator->hasMorePages())
  31. <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">Next ?</a></li>
  32. @else
  33. <li class="disabled"><span>Next ?</span></li>
  34. @endif
  35. </ul>
  36. @endif
@if ($paginator->hasPages())
    <ul >
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li ><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 ><span>{{ $element }}</span></li>
            @endif

            {{-- Array Of Links --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li ><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 ><span>Next ?</span></li>
        @endif
    </ul>
@endif


Show Demo

Label :

PHP

Laravel PHP Framework

How To

MVC

Web Development

Hope this code and post will helped you for implement Laravel 5.3 – Customizing pagination templates with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

61  +    =  69

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US