Styling the pagination - 5.7+

May 11, 2015

How to add options to the pagination

You can find the pagination in the default view template of Page List block type as below.

<?php if ($showPagination): ?>
    <?php echo $pagination;?>
<?php endif; ?>

And the rendered pagination with default template will be like this:

<div class="ccm-pagination-wrapper">
    <ul class="pagination">
        <li class="prev disabled"><span>←  Previous</span></li>
        <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
        <li><a href="/index.php/blog?ccm_paging_p=2">2</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=3">3</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=4">4</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=5">5</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=6">6</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=7">7</a></li>
        <li class="disabled"><span>…</span></li>
        <li><a href="/index.php/blog?ccm_paging_p=10">10</a></li>
        <li class="next"><a href="/index.php/blog?ccm_paging_p=2">Next →</a></li>
    </ul>
</div>

You can add various options to the pagination for replacing texts, classes, etc.

<?php if ($showPagination): ?>
    <?php
    $pagination = $list->getPagination();
    if ($pagination->getTotalPages() > 1) {
        $options = array(
            'proximity'           => 2,
            'prev_message'        => 'Go to previous',
            'next_message'        => 'Go to next',
            'dots_message'        => 'Dots',
            'active_suffix'       => 'Current Page',
            'css_container_class' => 'my-container-class',
            'css_prev_class'      => 'my-prev-class',
            'css_next_class'      => 'my-next-class',
            'css_disabled_class'  => 'my-disabled-class',
            'css_dots_class'      => 'my-dots-class',
            'css_active_class'    => 'my-active-class'
        );
        echo $pagination->renderDefaultView($options);
    }
    ?>
<?php endif; ?>

Result:

<div class="ccm-pagination-wrapper">
    <ul class="my-container-class">
        <li class="my-prev-class my-disabled-class"><span>Go to previous</span></li>
        <li class="my-active-class"><span>1 Current Page</span></li>
        <li><a href="/index.php/blog?ccm_paging_p=2">2</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=3">3</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=4">4</a></li>
        <li><a href="/index.php/blog?ccm_paging_p=5">5</a></li>
        <li class="my-dots-class"><span>Dots</span></li>
        <li><a href="/index.php/blog?ccm_paging_p=10">10</a></li>
        <li class="my-next-class"><a href="/index.php/blog?ccm_paging_p=2">Go to next</a></li>
    </ul>
</div>

How to bind a new pagination view manager

The default view template is built in Bootstrap3 style. If you want to use a new template instead of the default pagination template, you can bind a new pagination view manager. Here is an example of do this.

First, let's make a new manager class. It returns a new ConcretePagerfantaDefaultView instance, instead of ConcreteBootstrap3View instance.

application/src/Search/Pagination/View/Manager.php

<?php
namespace Application\Src\Search\Pagination\View;

use Concrete\Core\Support\Manager as CoreManager;
use Concrete\Core\Search\Pagination\View\ConcreteBootstrap3View;

class Manager extends CoreManager
{

    protected function createApplicationDriver()
    {
        return new ConcretePagerfantaDefaultView();
    }

    protected function createDashboardDriver()
    {
        return new ConcreteBootstrap3View();
    }

}

Then, let's create ConcretePagerfantaDefaultView class.

application/src/Search/Pagination/View/ConcretePagerfantaDefaultView.php

<?php
namespace Application\Src\Search\Pagination\View;

use \Pagerfanta\View\DefaultView;
use \Concrete\Core\Search\Pagination\View\ViewInterface;

class ConcretePagerfantaDefaultView extends DefaultView implements ViewInterface
{

    protected function createDefaultTemplate()
    {
        return new \Pagerfanta\View\Template\DefaultTemplate();
    }

    public function getArguments()
    {
        return array(
            'prev_message' => 'Prev',
            'next_message' => 'Next'
        );
    }

}

You have to replace a paginatino view manager. Please add this code to your application/bootstrap/autoload.php .

$classLoader = new \Symfony\Component\ClassLoader\Psr4ClassLoader();
$classLoader->addPrefix('Application\\Search', DIR_APPLICATION . '/' . DIRNAME_CLASSES . '/Search');
$classLoader->register();

Then, add this code to your application/bootstrap/app.php . This code adds a new manager class to IoC container.

$app->bind('manager/view/pagination', function($app) {
    return new \Application\Search\Pagination\View\Manager($app);
});

Finally, you will get a new view of the pagination.

<nav>
    <span class="disabled">Prev</span>
    <span class="current">1</span>
    <a href="/index.php/blog?ccm_paging_p=2">2</a>
    <a href="/index.php/blog?ccm_paging_p=3">3</a>
    <a href="/index.php/blog?ccm_paging_p=4">4</a>
    <a href="/index.php/blog?ccm_paging_p=5">5</a>
    <span class="dots">...</span>
    <a href="/index.php/blog?ccm_paging_p=10">10</a>
    <a href="/index.php/blog?ccm_paging_p=2">Next</a>
</nav>

This is the default template of Pagerfanta library which is bundled in concrete5.7. Please read the documentation of Pagerfanta to find more options.

https://github.com/whiteoctober/Pagerfanta

Related documentation

Recent Tutorials
How to update Add-Ons if not on the Update Add-Ons Menu item
Jul 4, 2022

How to manually download an add-on and update it when your site's core versions isn't considered compatible with the add-on version.

Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Add-On Developers: Get Your Add-Ons Ready for Concrete CMS 9.0
Aug 6, 2021
By andrew.

Concrete CMS 9.0 is coming! But there are some changes in version 9 that might affected your add-ons and themes. This document aims to answer questions about the most common ways that your add-ons might need to be changed, and common problems you'll run into.

Permissions for editors in a multilingual site
Jun 2, 2021
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Was this information useful?
Thank you for your feedback.