Bitrix simple template for "components\bitrix\system.pagenavigation\arrows\template.php" клевый дизайн с Flat Ui http://designmodo.github.io/Flat-UI/

template.php

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();

//Установка по умолчанию количество отображаемых страниц в пагинации
$DEFAULT_COUNT_PAGE = 10;
//Количество страниц
$PAGE_COUNT = $arResult['NavPageCount'];
//Ссылка
$strNavQueryString = ($arResult["NavQueryString"] != "" ? $arResult["NavQueryString"] . "&amp;" : "");
//Текущая страница
$PAGE_CURRENT = $arResult['NavPageNomer'];
$ARRAY_PAGE = range(1, $PAGE_COUNT);

if ($DEFAULT_COUNT_PAGE < $PAGE_COUNT) {
    $outset = 0;
    $center = ($DEFAULT_COUNT_PAGE / 2);
    if ($center < $PAGE_CURRENT) {
        $outset = $PAGE_CURRENT - $center;
    }
    if (($PAGE_CURRENT + $center) > $PAGE_COUNT) {
        $outset = $PAGE_COUNT - ($center * 2);
    }
    $ARRAY_PAGE = (array_slice($ARRAY_PAGE, $outset, 10));
}

function getUrlPageNumber($arResult, $num, $strNavQueryString){
    $URL = $arResult["sUrlPath"] . '?' . $strNavQueryString . 'PAGEN_' . $arResult["NavNum"] . '=' .$num;
    return $URL;
}
?>
<div class="page-pagination">
    <ul class="pagination">
        <? if($PAGE_CURRENT > 1): ?>
        <li class="previous">
            <a href="<?= getUrlPageNumber($arResult, ($arResult["NavPageNomer"] - 1), $strNavQueryString) ?>" class="fui-arrow-left"></a>
        </li>
        <? endif; ?>
        <? foreach ($ARRAY_PAGE as $item):?>
            <? if($item==$PAGE_CURRENT):?>
                <li class="active"><a href="<?= getUrlPageNumber($arResult, $item, $strNavQueryString)?>"><?=$item?></a></li>
            <? else:?>
                <li ><a href="<?= getUrlPageNumber($arResult, $item, $strNavQueryString)?>"><?=$item?></a></li>
            <? endif;?>
        <?endforeach;?>
        <? if($PAGE_CURRENT < $PAGE_COUNT): ?>
        <li class="next">
            <a href="<?= getUrlPageNumber($arResult, ($arResult["NavPageNomer"] + 1), $strNavQueryString) ;?>" class="fui-arrow-right"></a>
        </li>
        <? endif; ?>
    </ul>
</div>