Styling the pagination - 5.7+

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

• Creating Custom Code in the Application Directory