Styling the pagination - 5.7+

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
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
Using the Concrete Migration Tool Addon
Apr 27, 2023

How to use the Concrete CMS Migration Tool

How To Add Page Last Updated To Your Concrete CMS Pages
Mar 7, 2023

Concrete CMS has a page attribute you can add to a global area called "Page Date Modified." Here's how to add it

How To Exclude Subpages from Navigation
Dec 24, 2022

How to exclude subpages from navigation - useful for a news or blog link in your main navigation where you don't want all the subpages to appear in a drop down menu.

How Can I Change The Maximum Size Of Uploaded files
Dec 13, 2022

This tutorial explains how to update your php settings.

Updating Concrete Themes from Version 8 to Version 9
Nov 24, 2022

This tutorial covers commonly encountered issues when upgrading a Concrete CMS theme from version 8 to version 9

Transferring ownership of an add-on and a theme
Nov 15, 2022
By katzueno.

If you encounter a Concrete CMS add-on or theme that you love but not being maintained, you may want to ask the author to help or take over the add-on or theme. Here is the quick step-by-step guide of how to transfer the ownership.

Was this information useful?
Thank you for your feedback.