How to customize the pagination for 5.7

0_readme.md

concrete5.7 Pagination

How-tos

https://www.concrete5.org/documentation/how-tos/designers/styling-the-pagination-5.7/?likes_this_like=1

Issue

concretecms/concretecms#2359

PR

https://github.com/hissy/concrete5-5.7.0/commit/9d14c9a6edf79736efa1689e5e2a0d6e459fc946

code-1.php

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

code-2.php

<div class="ccm-pagination-wrapper">
    <ul class="pagination">
        <li class="prev disabled"><span>&larr;  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 &rarr;</a></li>
    </ul>
</div>

code-3.php

<?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; ?>

code-4.php

<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>

code-5.php

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

code-6.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();
    }

}

code-7.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'
        );
    }

}

code-8.php

<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>