Pagination - Bootstrap 4

This Joomla 4 override allows you to customize the Joomla pagination system by overriding the pagination files. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup - html/layouts/joomla/pagination/link.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Layout
 * @author 	    web-eau.net
 * @copyright   (C) 2014 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Language\Text;

$item    = $displayData['data'];
$display = $item->text;
$app = Factory::getApplication();

switch ((string) $item->text)
{
	// Check for "Start" item
	case Text::_('JLIB_HTML_START') :
		$icon = $app->getLanguage()->isRtl() ? 'icon-angle-double-right' : 'icon-angle-double-left';
		$aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
		break;

	// Check for "Prev" item
	case $item->text === Text::_('JPREV') :
		$item->text = Text::_('JPREVIOUS');
		$icon = $app->getLanguage()->isRtl() ? 'icon-angle-right' : 'icon-angle-left';
		$aria =Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
		break;

	// Check for "Next" item
	case Text::_('JNEXT') :
		$icon = $app->getLanguage()->isRtl() ? 'icon-angle-left' : 'icon-angle-right';
		$aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
		break;

	// Check for "End" item
	case Text::_('JLIB_HTML_END') :
		$icon = $app->getLanguage()->isRtl() ? 'icon-angle-double-left' : 'icon-angle-double-right';
		$aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text));
		break;

	default:
		$icon = null;
		$aria = Text::sprintf('JLIB_HTML_GOTO_PAGE', strtolower($item->text));
		break;
}

if ($icon !== null)
{
	$display = '<span class="' . $icon . '" aria-hidden="true"></span>';
}

if ($displayData['active'])
{
	if ($item->base > 0)
	{
		$limit = 'limitstart.value=' . $item->base;
	}
	else
	{
		$limit = 'limitstart.value=0';
	}

	$class = 'active';

	if ($app->isClient('administrator'))
	{
		$link = 'href="#" onclick="document.adminForm.' . $item->prefix . $limit . '; Joomla.submitform();return false;"';
	}
	elseif ($app->isClient('site'))
	{
		$link = 'href="' . $item->link . '"';
	}
}
else
{
	$class = (property_exists($item, 'active') && $item->active) ? 'active' : 'disabled';
}

?>
<?php if ($displayData['active']) : ?>
	<li class="page-item">
		<a aria-label="<?php echo $aria; ?>" <?php echo $link; ?> class="page-link">
			<?php echo $display; ?>
		</a>
	</li>
<?php elseif (isset($item->active) && $item->active) : ?>
	<?php $aria = Text::sprintf('JLIB_HTML_PAGE_CURRENT', strtolower($item->text)); ?>
	<li class="<?php echo $class; ?> page-item">
		<span aria-current="true" aria-label="<?php echo $aria; ?>" class="page-link"><?php echo $display; ?></span>
	</li>
<?php else : ?>
	<li class="<?php echo $class; ?> page-item">
		<span class="page-link" aria-hidden="true"><?php echo $display; ?></span>
	</li>
<?php endif; ?>

PhP markup - html/layouts/joomla/pagination/links.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Layout
 * @author 	    web-eau.net
 * @copyright   (C) 2014 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\Registry\Registry;

$list  = $displayData['list'];
$pages = $list['pages'];

$options = new Registry($displayData['options']);

$showLimitBox   = $options->get('showLimitBox', false);
$showPagesLinks = $options->get('showPagesLinks', true);
$showLimitStart = $options->get('showLimitStart', true);

// Calculate to display range of pages
$currentPage = 1;
$range       = 1;
$step        = 5;

if (!empty($pages['pages']))
{
	foreach ($pages['pages'] as $k => $page)
	{
		if (!$page['active'])
		{
			$currentPage = $k;
		}
	}
}

if ($currentPage >= $step)
{
	if ($currentPage % $step === 0)
	{
		$range = ceil($currentPage / $step) + 1;
	}
	else
	{
		$range = ceil($currentPage / $step);
	}
}
?>


<?php if (!empty($pages)) : ?>
	<nav class="pagination__wrapper" aria-label="<?php echo Text::_('JLIB_HTML_PAGINATION'); ?>">
		<div class="pagination pagination-toolbar text-center">

			<?php if ($showLimitBox) : ?>
				<div class="limit float-end">
					<?php echo Text::_('JGLOBAL_DISPLAY_NUM') . $list['limitfield']; ?>
				</div>
			<?php endif; ?>

			<?php if ($showPagesLinks) : ?>
				<ul class="pagination ms-auto mb-4 me-0">
					<?php echo LayoutHelper::render('joomla.pagination.link', $pages['start']); ?>
					<?php echo LayoutHelper::render('joomla.pagination.link', $pages['previous']); ?>
					<?php foreach ($pages['pages'] as $k => $page) : ?>

						<?php $output = LayoutHelper::render('joomla.pagination.link', $page); ?>
						<?php if (in_array($k, range($range * $step - ($step + 1), $range * $step), true)) : ?>
							<?php if (($k % $step === 0 || $k === $range * $step - ($step + 1)) && $k !== $currentPage && $k !== $range * $step - $step) : ?>
								<?php $output = preg_replace('#(<a.*?>).*?(</a>)#', '$1...$2', $output); ?>
							<?php endif; ?>
						<?php endif; ?>

						<?php echo $output; ?>
					<?php endforeach; ?>
					<?php echo LayoutHelper::render('joomla.pagination.link', $pages['next']); ?>
					<?php echo LayoutHelper::render('joomla.pagination.link', $pages['end']); ?>
				</ul>
			<?php endif; ?>

			<?php if ($showLimitStart) : ?>
				<input type="hidden" name="<?php echo $list['prefix']; ?>limitstart" value="<?php echo $list['limitstart']; ?>">
			<?php endif; ?>

		</div>
	</nav>
<?php endif; ?>

PhP markup - html/layouts/joomla/pagination/list.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Layout
 * @author 	 	web-eau.net
 * @copyright   (C) 2016 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Language\Text;

$list = $displayData['list'];

?>
<nav class="pagination__wrapper d-flex justify-content-center" aria-label="<?php echo Text::_('JLIB_HTML_PAGINATION'); ?>">
	<ul class="pagination d-flex justify-content-center mx-auto text-center w-100 ms-0 mb-4">
		<?php echo $list['start']['data']; ?>
		<?php echo $list['previous']['data']; ?>

		<?php foreach ($list['pages'] as $page) : ?>
			<?php echo $page['data']; ?>
		<?php endforeach; ?>

		<?php echo $list['next']['data']; ?>
		<?php echo $list['end']['data']; ?>
	</ul>
</nav>

CSS

.page-item.active .page-link {
background-color: #145889;
}
.pagenavigation {
padding: 20px 0 20px 0;
}

This Joomla 3 override allows you to customize the Joomla pagination system by overriding the pagination.php file. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Platform
		* @subpackage  HTML
		* @Author 	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE
	*/
	defined('JPATH_PLATFORM') or die;
	/**
		* Pagination Class.  Provides a common interface for content pagination for the
		* Joomla! Platform.
		*
		* @package     Joomla.Platform
		* @subpackage  HTML
		* @since       11.1
	*/
	function pagination_list_render($list)
	{
		// Reverse output rendering for right-to-left display.
		$app = JFactory::getApplication();
		$html = '<nav><ul class="pagination">';
		$html .= $list['start']['data'];
		$html .= $list['previous']['data'];
		foreach ($list['pages'] as $page)
		{
			$html .= $page['data'];
		}
		$html .= $list['next']['data'];
		$html .= $list['end']['data'];
		$html .= '</ul></nav>';
		return $html;
	}
	/**
		* Method to create an active pagination link to the item
		*
		* @param   JPaginationObject  &$item  The object with which to make an active link.
		*
		* @return   string  HTML link
		*
		* @since    11.1
	*/
	function pagination_item_active(&$item)
	{
		$app = JFactory::getApplication();
		if ($app->isAdmin())
		{
			if ($item->base > 0)
			{
				return "<li class=\"page-item\"><a class=\"page-link\" title=\"" . $item->text . "\" onclick=\"document.adminForm." . $this->prefix . "limitstart.value=" . $item->base
				. "; Joomla.submitform();return false;\">" . $item->text . "</a></li>";
			}
			else
			{
				return "<li class=\"page-item\"><a class=\"page-link\" title=\"" . $item->text . "\" onclick=\"document.adminForm." . $this->prefix
				. "limitstart.value=0; Joomla.submitform();return false;\">" . $item->text . "</a></li>";
			}
		}
		else
		{
			return "<li class=\"page-item\"><a class=\"page-link\" title=\"" . $item->text . "\" href=\"" . $item->link . "\">" . $item->text . "</a></li>";
		}
	}
	/**
		* Method to create an inactive pagination string
		*
		* @param   object  &$item  The item to be processed
		*
		* @return  string
		*
		* @since   11.1
	*/
	function pagination_item_inactive(&$item)
	{
		$app = JFactory::getApplication();
		if ($app->isAdmin())
		{
			return "<li class=\"page-item\"><a class=\"page-link\" href=\"#\">" . $item->text . "</a></li>";
		}
		else
		{
			return "<li class=\"disabled\"><a class=\"page-link\" href=\"#\">" . $item->text . "</a></li>";
		}
	}