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