Customising the Laravel Paginator

Laravel makes pagination so simple, as you would expect with a great framework. You’ll find it’s even styled if you’re using bootstrap, but for a lot of projects you’ll likely be using a custom CSS & HTML structure, which means you have to dig deeper into Laravel’s paginator.

I find the best way to learn how to customise a framework is to explore the source. The two important files are the view and the presenter:

(view on github)

Illuminate/Pagination/views/slider-3.php

(view on github)

Illuminate/Pagination/BootstrapPresenter.php

Now we need to create our own view so we can customise the HTML. Let’s create a file:

'app/views/pagination/slider.php'

And we need to tell Laravel to use our new view. So, in ‘app/config/view.php’, set the line to:

'pagination' => 'pagination.slider'

Below is a sample view to use, paste this into your view and then we can work through what each line is doing

<?php
$presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
?>

<?php if ($paginator->getLastPage() > 1): ?>
    <div class="pagination">
        <ul>
            <?php echo getPrevious($paginator->getCurrentPage(), $paginator->getUrl( $paginator->getCurrentPage()-1 ) ) ?>
            <?php echo $presenter->getPageRange(1, $paginator->getLastPage() ); ?>
            <?php echo getNext($paginator->getCurrentPage(), $paginator->getLastPage(), $paginator->getUrl( $paginator->getCurrentPage()+1 ) )  ?>
        </ul>
    </div>
<?php endif; ?>

<?php
function getPrevious($currentPage, $url)
{
    if ($currentPage <= 1)
        return '<li class="previous disabled"><span class="icon-chevron-left"></span></li>';
    else
       return '<li class="previous"><a class="icon-chevron-left" href="'.$url.'"></a></li>';
}

function getNext($currentPage, $lastPage, $url)
{
    if ($currentPage >= $lastPage)
        return '<li class="next disabled"><span class="icon-chevron-right"></span></li>';
    else
        return '<li class="next"><a class="icon-chevron-right" href="'.$url.'"></a></li>';
}
?>

Most of the pagination HTML is generated by the line below.

$presenter->getPageRange()

Which generates your standard HTML for each page

<li><a href="url?page=1">1</a></li>
<li class="active"><a href="url?page=2">2</a></li>
<li><a href="url?page=3">3</a></li>

Now we have two custom functions getPrevious & getNext, which generate our previous and next links. In this case I wanted them to have no text, while adding some classes for styling. A sample output would be:

<li class="next"><a class="icon-chevron-right" href="url?page=3"></a></li>

We have three other functions that are for the most part pretty self explanatory

$paginator->getCurrentPage() //Get the current page
$paginator->getLastPage() //Get the last page
$paginator->getUrl() //Get the page url when you pass it a page number

This should hopefully give you a good insight into how to customise the Paginator. If anyone knows of any better ways to do it, please give me a tweet.