How to create custom pagination view in laravel

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will how you how to create custom pagination view in laravel. We know laravel have default provide us a pagination view by using bootstrap design like next and previous button and also number page with link. But it is a very common and also very generally used by most of developer. If we want to change it by using Presenter class of laravel. we can easily set our own custom view for our pagination layout.

So now in bellow i will give you the example of where i added first, last, next and previous button and also main banifit is that we can easily modify that view and also link.

So, at first need to create new folder “Pagination”app/Pagination and inside this folder need to create one file “HDPresenter.php”app/Pagination/HDPresenter.php. On this class file i will generate custom layout for pagination. So now in this class file we can add our own class, div, id etc.Now it is very easy to understand how it works. so need to put bellow code in that file.

app/Pagination/HDPresenter.php

namespace App\Pagination;
use Illuminate\Pagination\BootstrapThreePresenter;


class HDPresenter extends BootstrapThreePresenter {


    public function render()
    {
        if ($this->hasPages()) {
            return sprintf(
                '<div class="pagi-custom"><div class="pull-left">%s %s</div> <div class="pull-right">%s %s</div></div>',
                $this->getFirst(),
                $this->getButtonPre(),
                $this->getButtonNext(),
                $this->getLast()
            );
        }
        return "";
    }


    public function getLast()
    {
        $url = $this->paginator->url($this->paginator->lastPage());
        $btnStatus = '';


        if($this->paginator->lastPage() == $this->paginator->currentPage()){
            $btnStatus = 'disabled';
        }
        return $btn = "<a href='".$url."'><button class='btn btn-success ".$btnStatus."'>Last <i class='glyphicon glyphicon-chevron-right'></i></button></a>";
    }


    public function getFirst()
    {
        $url = $this->paginator->url(1);
        $btnStatus = '';


        if(1 == $this->paginator->currentPage()){
            $btnStatus = 'disabled';
        }
        return $btn = "<a href='".$url."'><button class='btn btn-success ".$btnStatus."'><i class='glyphicon glyphicon-chevron-left'></i> First</button></a>";
    }


    public function getButtonPre()
    {
        $url = $this->paginator->previousPageUrl();
        $btnStatus = '';


        if(empty($url)){
            $btnStatus = 'disabled';
        }
        return $btn = "<a href='".$url."'><button class='btn btn-success ".$btnStatus."'><i class='glyphicon glyphicon-chevron-left pagi-margin'></i><i class='glyphicon glyphicon-chevron-left'></i> Previous </button></a>";
    }


    public function getButtonNext()
    {
        $url = $this->paginator->nextPageUrl();
        $btnStatus = '';


        if(empty($url)){
            $btnStatus = 'disabled';
        }
        return $btn = "<a href='".$url."'><button class='btn btn-success ".$btnStatus."'>Next <i class='glyphicon glyphicon-chevron-right pagi-margin'></i><i class='glyphicon glyphicon-chevron-right'></i></button></a>";
    }


}

So now, here we know how to use this class in laravel blade file, so let’s see the following file how to extend this class on pagination class function.

Read Also: How to remove particular value from jquery array?

In Blade file

@extends('layouts.app')
 
@section('content')
<div class="container">
	<table class="table table-bordered">
		<tr>
			<th>Title</th>
			<th>Description</th>
		</tr>
	@foreach ($posts as $post)
	<tr>
		<td>{{ $post->title }}</td>
		<td>{{ $post->description }}</td>
	</tr>
	@endforeach
	</table>
	{!! with(new App\Pagination\HDPresenter($posts))->render(); !!}
</div>
@endsection

Thanks for read. I hope it help you. For more you can follow us on facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →