Красивая, удобная и компактная пагинация для Joomla 2.5

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
12.04.2014

Всем доброго дня! Мы продолжаем цикл статей о тонкостях работы с Joomla и сегодня я хочу рассказать вам о том, как легко можно изменить стиль и структуру пагинации (разбиение информации на страницы) в Джумле.

Но давайте сначала разберёмся, зачем это нужно? Стандартная структура пагинации Joomla выглядит так:

стандартная пагинация Joomla

В категории на скриншоте 24 страницы, но больше десяти за раз Джумла не отрисовывает (догадывайся как хочешь), хотя бы троеточие в конце добавили.., но дело даже не в этом. Сегодня большинство сайтов показывает лишь небольшую часть доступных страниц, а остальные скрывает троеточием. Например, на скриншоте ниже мы находимся на первой странице:

троеточие в пагинации

Здесь на четвёртой:

И пример, если мы находимся на последней:

Так вот сегодня я научу вас, как сделать точно такую же пагинацию, но это ещё не всё. Предпосылки для создания собственной пагинации в Джумле сделаны очень удобно, вы с лёгкостью можете реализовать абсолютно любую структуру, совсем необязательно как в примере выше. Однако для этого необходимы хотя бы минимальные знания PHP, которые вы можете почерпнуть из соответствующего раздела этого блога.

Приступим

Для начала необходимо зайти в папку html вашего шаблона Джумлы (/templates/ваш_шаблон/html/) и внутри неё создать пустой файл под названием pagination.php. Если папки html у вас ещё нет, не бойтесь создать её самостоятельно. Я ценю ваше время, поэтому для тех, кто торопиться, я сразу выложу готовый вариант, а только потом объясню, как это работает. Итак, в только что созданный файл pagination.php копируем этот код:

<?php
defined( '_JEXEC' ) or die; // защита

// главная функция этого файла, имя этой функции изменять нельзя
function pagination_list_render($list){
    $html = '';
    $gwpages = array();
    // перебираем массив со всеми кнопками пагинации
    foreach ($list['pages'] as $number => $page) {
        if($page['active'] === false){
            $current = $number;
        }
        $countPages = $number;
    }
    // конец перебора массива

    // Далее отрисовываем пагинацию так, как нам захочется
    if($current > 1) $html .= GWaddRow(&$gwpages, $list['previous'], 'pagination-previous');
    $html .= GWaddRow(&$gwpages, $list['start'], 'pagination-start');
    if($current > 3) $html .= '...';
    if(isset($list['pages'][$current-1])) $html .= GWaddRow(&$gwpages, $list['pages'][$current-1]);
    $html .= GWaddRow(&$gwpages, $list['pages'][$current]);
    if(isset($list['pages'][$current+1])) $html .= GWaddRow(&$gwpages, $list['pages'][$current+1]);
    if($current < ($countPages - 2)) $html .= '...';
    $html .= GWaddRow(&$gwpages, $list['end'], 'pagination-end');
    if($current < $countPages) $html .= GWaddRow(&$gwpages, $list['next'], 'pagination-next');
    return '<ul>'.$html.'</ul>';
}
// конец главной функции

// Вспомогательная функция, она необязательна, но в данном случае было удобно делать с помощью неё
function GWaddRow(&$pages, $page, $class = ''){
    if(in_array($page, $pages)){
        return;
    }
    $row = '<li';
    $row .= ($class)? ' class="'.$class.'">' : '>';
    $row .= $page['data']. '</li>';
    $pages[] = $page;
    return $row;
}
?>

Далее в ваш CSS файл копируем:

.vm-pagination ul li a,.vm-pagination ul li span.pagenav,.pagenav a,div.pagination a,div.pagination span{display:inline-block;margin:0 3px;padding:4px 10px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
.vm-pagination ul li a,.pagenav a,div.pagination a{border:1px solid #d4d4d4;background: #fefefe;text-decoration:none;color:#27292c;
background: -moz-linear-gradient(top,  #fefefe 0%, #f0f0f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f0f0f0));
background: -webkit-linear-gradient(top,  #fefefe 0%,#f0f0f0 100%);
background: -o-linear-gradient(top,  #fefefe 0%,#f0f0f0 100%);
background: -ms-linear-gradient(top,  #fefefe 0%,#f0f0f0 100%);
background: linear-gradient(to bottom,  #fefefe 0%,#f0f0f0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f0f0f0',GradientType=0 );}
.vm-pagination ul li span.pagenav,div.pagination span{border:1px solid #ff9e34;color:white;background: #ff9e34;box-shadow:inset 0 0 4px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);}
ul.pagenav,div.pagination{margin:10px 0 0;padding:0;}
ul.pagenav li,div.pagination li{list-style:none;display:inline-block;}

Этот CSS стилизует пагинацию Virtuemart2, а также материалов и категорий Joomla 2.5. Если у вас установлены другие версии или даже другие компоненты, всё что вам нужно, это просто изменить селекторы.

Готово! Но кем бы я был, если бы не объяснил, как это работает? В коде выше используется специально зарезервированное имя функции pagination_list_render(), механика Джумлы сама знает, в каком месте нужно вызвать эту функцию, поэтому наша задача, назвать её именно так. Внутри этой функции мы и программируем нашу пагинацию так, как нам нужно.

Код прокомментирован, но чтобы лучше понять структуру данных, с которыми нам приходится работать, я хочу показать вам результат работы функции var_dump($list):

Как я и говорил в самом начале статьи, в пределах одной страницы храниться максимум 9 соседних страниц, а также кнопки Вперёд, Назад, В начало, В конец и... кнопка которая есть, но ничего не делает, нигде не используется и не показывается – «Посмотреть все».

Думаю тем, кто хоть немного знаком с PHP уже стало понятно, что переделать пагинацию в Джумле как вздумается – дело 10 минут. Ну а для тех, кто ничего не понял в сегодняшней статье, ещё раз рекомендую изучить раздел PHP (он небольшой, пока что в нём самые азы и всё подробно разжёвано), либо использовать готовый вариант, который я выложил выше.

Всем спасибо за внимание, не забывайте подписываться на уникальные уроки от Site on! Хороших вам выходных!

С уважением, .
Пожалуйста, оцените эту статью
Средняя оценка: 4.86 из 5 (проголосовало: 28)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: у треугольника три...
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: у треугольника три...
Ответ:

18.06.2014 09:27:49 Алекс:
Что бы заработало пришлось убрать "&" у всех перменных
+ не показывается 1ая и полседня страница
Сейчас отображается так:
Вначало ... 5 6 .... Вконец

Ответить на комментарий


12.07.2014 07:36:30 Александр:
Спасибо! Очень помогло, но есть вопрос, у меня три практически одинаковых сайта с разным содержимом, на одном всё заработала, а на двух других нет, в чем может быть причина?
12.07.2014 08:44:36 Сергей отвечает:
Здравствуйте. В чём проявляется "не работа"?
1) Выдаёт PHP ошибки?
2) Или криво получается?
3) Или просто ничего не происходит?
13.07.2014 06:30:03 Александр отвечает:
Ошибок не вижу или не знаю где смотреть. Проанализировал через Firebug как будто он не видит эти CSS. Если можете помочь, давайте приватно пообщаемся.
13.07.2014 06:35:09 Александр отвечает:
И кстати, мне не пришло уведомление что вы ответили, приходило письмо подтверждающее подписку только.

Ответить на комментарий


09.09.2014 21:17:36 splash:
1. стоит поставить здесь 2 вместо 3 - if($current > 2) $html..., а тут 1 вместо 2 - if($current < ($countPages - 1)) $html..., чтобы точечки показывались и когда нет только одной страницы

2. В обоих случаях надо сделать <li>...</li> иначе троеточия показываются вне списка

Ответить на комментарий


21.10.2014 12:21:37 Андрей:
Подскажите, как отобразить не по 3 страницы в пагинации, а к примеру 5 или 10. ?

Ответить на комментарий


22.10.2015 10:38:59 Asdsa:
имена классов писал аутист?

Ответить на комментарий


04.05.2016 07:38:58 Stas:
Давно пользуюсь этим скриптом и вот настал момент сделать якорь для списка товаров в категории.
Попытался сделать так

$row = '<li';
$row .= ($class)? ' class="'.$class.'">' : '>';
$row .= $page['data']. '#top'.'</li>';
$pages[] = $page;
return $row;

Но результата нет подскажите куда вставить #top в этом коде чтоб якорь срабатывал только на товары а не перекидывал в верх страницы.
И еще вопрос кто то делал тайтлы для каждой страницы.
Поделитесь опытом кто делала подобное.
Заранее благодарин за ответ
10.05.2016 15:10:09 Stas отвечает:
Если кому интересно то идем в
/administrator/components/com_virtuemart/helpers/vmpagination.php
и тут ищем
return '<a '.$rel.' title="' . $item->text . '" href="' . $item->link . '" class="pagenav">' . $item->text . '</a>';
и приводим к такому виду
return '<a '.$rel.' title="' . $item->text . '" href="' . $item->link .'#pagination-top'. '" class="pagenav">' . $item->text . '</a>';
где '#pagination-top'. и есть наш якорь

Ответить на комментарий

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-