Свой шаблон постраничной навигации

Чтобы кастомизировать постраничную навигацию, надо скопировать один из шаблонов системного компонента system.pagenavigation. Все содержимое папки modern копируем в папку pager:

Берем содержимое из bitrix/components/bitrix/system.pagenavigation/templates/modern и копируем в директорию local/templates/шаблон/components/bitrix/system.pagenavigation/pager.

Удаляем файл стилей style.css и создаем файл .description.php со следующим содержимом:

<?
/*
* Файл local/templates/шаблон/components/bitrix/system.pagenavigation/pager/.description.php
*/
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
$arTemplateDescription = array(
"NAME" => GetMessage("SYS_PAGER_TMPL_NAME"),
"DESCRIPTION" => GetMessage("SYS_PAGER_TMPL_DESCR"),
);

Добавляем или изменяем ланговый файл:

<?
/*
 * Файл local/templates/шаблон/components/bitrix/system.pagenavigation/pager/lang/ru/description.php
 */
$MESS['SYS_PAGER_TMPL_NAME'] = 'Постраничная навигация';
$MESS['SYS_PAGER_TMPL_DESCR'] = 'Шаблон постраничной навигации';

Теперь нам надо отредактировать файл template.php. Распечатаем массив $arResult:

Array
(
    [NavShowAlways] => 
    [NavTitle] => Статьи
    [NavRecordCount] => 11
    [NavPageCount] => 6
    [NavPageNomer] => 3
    [NavPageSize] => 2
    [bShowAll] => 
    [NavShowAll] => 
    [NavNum] => 1
    [bDescPageNumbering] => 
    [add_anchor] => 
    [nPageWindow] => 5
    [bSavePage] => 
    [sUrlPath] => /blog/
    [NavQueryString] => 
    [sUrlPathParams] => /blog/?
    [nStartPage] => 1
    [nEndPage] => 5
    [NavFirstRecordShow] => 5
    [NavLastRecordShow] => 6
)

В нашем случае показывается список из 11 статей, по две статьи на страницу. Всего получается 6 страниц, но на последней странице только одна статья.

NavShowAlways всегда показывать постраничную навигацию
NavTitle название списка элементов, например «Статьи» или «Новости»
NavRecordCount общее количество статей (записей)
NavPageCount общее количество страниц
NavPageNomer номер текущей страницы
NavPageSize количество статей на одну страницу
bShowAll разрешено или нет показывать ссылку «Все статьи»
NavShowAll равен true, если показываются все статьи, без постраничной навигации
NavNum номер постраничной навигации (PAGEN_1, PAGEN_2, …)
bDescPageNumbering использовать или нет обратную постраничную навигацию
nPageWindow количество страниц, которые отображаются в постраничной навигации
bSavePage равна true если в главном модуле отмечена опция «Запоминать последнюю открытую страницу»
sUrlPath путь к странице относительно корня
NavQueryString строка GET-параметров
nStartPage номер первой страницы слева для текущей страницы
nEndPage номер первой страница справа для текущей страницы
NavFirstRecordShow порядковый номер первой статьи на текущей странице
NavLastRecordShow порядковый номер последней статьи на текущей странице

По поводу переменной bSavePage: Пример запрещает сохранение в сессии номера последней страницы при стандартной постраничной навигации. По умолчанию в сессии запоминается последняя открытая страница постраничной навигации:

CPageOption::SetOptionString("main", "nav_page_in_session", "N");

По поводу переменных nStartPage и nEndPage. Если текущая страница — третья (NavPageNomer=3), а показывается пять ссылок (nPageWindow=5), тогда nStartPage=1, а nEndPage=5:

<a href="...">1</a> <a href="...">2</a> <span>3</span> <a href="...">4</a> <a href="...">5</a>

Если текущая страница — четвертая (NavPageNomer=4), а показывается пять ссылок (nPageWindow=5), тогда nStartPage=2, а nEndPage=6:

<a href="...">2</a> <a href="...">3</a> <span>4</span> <a href="...">5</a> <a href="...">6</a>

По поводу переменных NavFirstRecordShow и NavLastRecordShow. У нас всего 11 статей на 6 страницах, по две статьи на страницу. Если текщая страница — третья, то NavFirstRecordShow=5, а NavLastRecordShow=6. На первой странице будут первая и вторая статьи, на второй странице — третья и четвертая, на третьей странице (текущей) — пятая и шестая.

Настраиваем шаблон:

<?php
/*
* local/templates/шаблон/components/bitrix/system.pagenavigation/pager/template.php
*/
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die();
$this->setFrameMode(true);
// ссылка на первую страницу
$firstPageUrl = $arResult['sUrlPath'];
if (!empty($arResult['NavQueryString'])) {
$firstPageUrl = $firstPageUrl.'?'.$arResult['NavQueryString'];
}
// ссылка на последнюю страницу
$lastPageUrl = $arResult['sUrlPath'];
if (!empty($arResult['NavQueryString'])) {
$lastPageUrl = $lastPageUrl.'?'.$arResult['NavQueryString'].'&PAGEN_'.$arResult['NavNum'].'='.$arResult['NavPageCount'];
} else {
$lastPageUrl = $lastPageUrl.'?PAGEN_'.$arResult['NavNum'].'='.$arResult['NavPageCount'];
}
?>
<ul class="pager">
<?php if ($arResult['NavPageNomer'] > 1): /* ссылка на первую страницу */ ?>
<li>
<a href="<?= $firstPageUrl ?>" title="Первая">«</a>
</li>
<?php endif; ?>
<?php for ($i = $arResult['nStartPage']; $i <= $arResult['nEndPage']; $i++): ?>
<?php
// ссылка на очередную страницу
$pageUrl = $arResult['sUrlPath'];
if (!empty($arResult['NavQueryString'])) {
$pageUrl = $pageUrl.'?'.$arResult['NavQueryString'].'&PAGEN_'.$arResult['NavNum'].'='.$i;
} else {
$pageUrl = $pageUrl.'?PAGEN_'.$arResult['NavNum'].'='.$i;
}
?>
<?php if ($arResult['NavPageNomer'] == $i): /* если это текущая страница */ ?>
<li><span><?= $i; ?></span></li>
<?php else: ?>
<li><a href="<?= $pageUrl; ?>"><?= $i; ?></a></li>
<?php endif; ?>
<?php endfor; ?>
<?php if ($arResult['NavPageNomer'] < $arResult['NavPageCount']): /* ссылка на последнюю страницу */ ?>
<li>
<a href="<?= $lastPageUrl; ?>" title="Последняя">»</a>
</li>
<?php endif; ?>
</ul>

Настраиваем стили:

/*
* local/templates/шаблон/components/bitrix/system.pagenavigation/pager/style.css
*/
.pager {
overflow: hidden;
margin: 10px 0;
}
.pager li {
list-style: none;
float: left;
margin-right: 15px;
}
.pager li:last-child {
margin-right: 0;
}
.pager li a {
display: block;
width: 26px;
height: 26px;
text-align: center;
background: #395985;
font-size: 14px;
line-height: 26px;
color: #fff;
text-decoration: none;
}
.pager li span {
display: block;
width: 26px;
height: 26px;
text-align: center;
background: #e9751f;
font-size: 14px;
line-height: 26px;
color: #fff;
}

Скачать
Шаблон постраничной навигации