Laravel, by default, uses Bootstrap as its pagination utility. Developers, however, are often agnostic on their use of frameworks. That they may choose to use Foundation with Laravel on their projects. So in this blog I’ll outline how one can switch to Foundation and use it as Laravel’s pagination utility.

Extend the Presenter

First, extend the Illuminate\Pagination\Presenter class and override its methods. In overriding the methods, you may only need to replace the Bootstrap-specific CSS classes with its Foundation equivalent. It is not necessary to override all of the Presenter’s methods.

Also, do not forget to add the namespace (in the case of the snippet below, Libraries, but it can be anything else) in the autoload directive in composer.json. When choosing to autoload in PSR-4, note that it is case-sensitive such that “Libraries” is not the same as “libraries”.

<?php namespace Libraries; use Illuminate\Pagination\Presenter; // app/Libraries/FoundationPresenter.php class FoundationPresenter extends Presenter { /** * Get HTML wrapper for active text. * * @param string $text * @return string */ public function getActivePageWrapper($text) { return '<li class="current"><a href="">' . $text . '</a></li>'; } /** * Get HTML wrapper for disabled text. * * @param string $text * @return string */ public function getDisabledTextWrapper($text) { return '<li class="arrow unavailable"><a>' . $text . '</a></li>'; } /** * Get HTML wrapper for a page link. * * @param string $url * @param int $page * @return string */ public function getPageLinkWrapper($url, $page) { return '<li><a href="' . $url . '">' . $page . '</a></li>'; } /** * Get the previous page pagination element. * * @param string $text * @return string */ public function getPrevious($text = '«') { // If the current page is less than or equal to one, it means we can't go any // further back in the pages, so we will render a disabled previous button // when that is the case. Otherwise, we will give it an active "status". if ($this->currentPage <= 1) { return $this->getDisabledTextWrapper($text); } else { $url = $this->paginator->getUrl($this->currentPage - 1); return '<li class="arrow"><a href="' . $url . '">' . $text . '</a></li>'; } } /** * Get the next page pagination element. * * @param string $text * @return string */ public function getNext($text = '»') { // If the current page is greater than or equal to the last page, it means we // can't go any further into the pages, as we're already on this last page // that is available, so we will make it the "next" link style disabled. if ($this->currentPage >= $this->lastPage) { return $this->getDisabledTextWrapper($text); } else { $url = $this->paginator->getUrl($this->currentPage + 1); return '<li class="arrow"><a href="' . $url . '">' . $text . '</a></li>'; } } }

Create the Pagination Template

Next is to create the pagination template and add the HTML markup and CSS classes required by Foundation for the pagination to work. Add a line too that will instantiate a FoundationPresenter object and call its render() method.

<?php // app/views/paginator/foundation.blade.php ?> <div class="row"> <div class="medium-12 columns pagination-centered"> <ul class="pagination"> {{ with(new Libraries\FoundationPresenter($paginator))->render(); }} </ul> </div> </div>

Set the Pagination View

Lastly, using the pagination array key, set the view configuration to use the template above as the application’s pagination view template.

<?php // app/config/view.php return array( /* |-------------------------------------------------------------------------- | View Storage Paths |-------------------------------------------------------------------------- | | Most templating systems load templates from disk. Here you may specify | an array of paths that should be checked for your views. Of course | the usual Laravel view path has already been registered for you. | */ 'paths' => array(__DIR__.'/../views'), /* |-------------------------------------------------------------------------- | Pagination View |-------------------------------------------------------------------------- | | This view will be used to render the pagination link output, and can | be easily customized here to show any view you like. A clean view | compatible with Twitter's Bootstrap is given to you by default. | */ 'pagination' => 'paginator.foundation', 'pagination_per_page' => 15, // Number of items per page. );

Josel's Blog

Foundation as Laravel Paginator

Extend the Presenter