Стили для пагинации. Bootstrap - Pagination (навигационный блок для пагинации)

Пагинация, а если поптросту — постраничная навигация, важный элемент любого мало-мальски наполненного сайта. Различные системы управления сайтом, в большинстве своем, имеют встроенные инструмента для реализации пагинации. Так же существует масса отдельных плагинов, написанных под это полезное дело, в большинстве случаев они построены с использованием библиотеки . Все эти плагины, разные и по стилю исполнения и по функциональным возможностям, но главное все они, это прекрасная альтернатива серверной реализации разбивки объемного содержания сайтов на страницы.

Предлагаю на рассмотрение, на мой взгляд, один из самых легких jQuery плагинов, для создания постраничной навигации, который поможет вам организовать, привлекательную и быструю нумерацию страниц.

Очень легкий, во всех отношениях, и по весу, и все что касается подключения, настроек, резвый для создания нумерации страниц, укомплектованный тремя стилями оформления, и заряженный на поддержку .

Кстати, если вас не устроят стандартные стили, можете использовать , который не составит большого труда прикрутить в .css плагина.

Теперь, давайте более подробно рассмотрим, как правильно подключить сам плагин и стилевой файл к документу, то-есть непосредственно внедрить его на страницы сайта, и пройдемся по доступным настройкам плагина.

Для начала, конечно же нужно заиметь плагин, то есть с исходниками, в который бережно упакованы сам jquery javascript и файл стилей css.

Разберем пошагово, как использовать плагин:

В теле страницы в раздел ... необходимо подключить фрэймворк jQuery, желательно версии 1.7.2, или более свежей, сделать это можно используя специальное хранилище Google:

Если у вас на сайте jQuery уже включен и вовсю работает, все телодвижения описанные выше, можете смело пропустить, главное следите за тем, что бы версия jQuery, не была слишком дремучей. В WordPress, кстати, с этим все в порядке.
Далее, подключаем нашу рабочую лошадку — плагин jquery.simplePagination.js :

Можно не городить огород, а просто выбрать нужный вам стиль, светлый, темный или компактный и вставить набор правил в файл стилей.css вашего шаблона. Прописать свои собственные стили или воспользоваться Bootstrap , тоже вариант, в плане оригинальности и развития навыков сайтостроения, даже более предпочтительный.

Чтобы вывести панель постраничной навигации на страницах сайта, там где вы планируете её разместить, логичнее и чаще всего, это внизу основного содержания, следует прописать следующее:
Для светлого фона:

Компактная тема:

$(function() { $(#light-pagination).pagination({ items: 100, itemsOnPage: 10, cssStyle: "light-theme" }); });

В примере я использовал инициализацию для пагинации светлой темы #light-pagination , вы же можете изменить селектор на другой, для компактного это #compact-pagination , или для темного стиля #dark-pagination . Не забывайте в таком случае менять и класс в функции cssStyle .
Кая я уже писал выше, плагин очень гибкий в настройках, для изменения доступны следующие опции:

• items — Общее количество элементов, которые будут использоваться для расчета страниц. По умолчанию: 1 .
• itemsOnPage — Количество элементов, отображаемых на каждой странице. По умолчанию: 1 .
• pages — Опционально. Если указано значение, опции items и itemsOnPage игнорируются. Устанавливает количество страниц в списке.
• displayedPages — Сколько номеров страниц должно быть видно во время навигации. Минимально допустимое значение: 3 , по умолчанию: 5 .
• edges — Сколько номеров страниц видно в начале и в конце нумерации. По умолчанию значение: 2 .
• currentPage — Какая страница будет выбран сразу после запуска. Логично, по умолчанию значение: 1 .
• hrefTextPrefix — Строка, используемая в атрибуте HREF, добавляется перед номером страницы. По умолчанию: "#page- " .
• hrefTextSuffix — Строка, используемая в атрибуте HREF, вставляется после номера страницы. По умолчанию пустая строка.
• prevText — Текст кнопки на предыдущую страницу. По умолчанию: «Prev» .
• nextText — Текст кнопки на следующую страницы. По умолчанию: «Next»
• cssStyle — Определят стиль CSS. По умолчанию: «light-theme»
• selectOnClick — Выбор страницы после нажатия, по умолчанию — включен(true ), зачем отключать так и не понял, но такая возможность есть, значение: «false».

Мы рассмотрели самые основные настройки. О дополнительных функциях и доступных методах применения этого плагина, можете узнать изучив документацию непосредственно на странице разработчика.

Мне остается только, пожелать вам удачи и успехов в работе над вашими новыми проектами.

Пагинация, включая навигацию по страницам, – достаточно простая вещь, но у начинающих часто возникают проблемы с ее созданием, а главное, пониманием ее работы...

Одной из задач пагинации является одновременный вывод не всех элементов, а их ограниченного числа, скажем, не более $pp элементов, причем, какая именно группа элементов выводится, зависит от входного параметра $pn – номера этой группы. Этот номер, собственно, и есть номер страницы. Тут нужен такой запрос:

SELECT * FROM `table` LIMIT {($pn-1)*$pp},{$pp}

Значение $pn уменьшается на 1, чтобы, например, для первой страницы списка при значении $pp , равном 10, выбирались элементы с 0 по 9, а не с 10 по 19. Естественно, если страницы нумеруются с нуля, уменьшать на 1 значение $pn в запросе не нужно.

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

SELECT FLOOR((COUNT(*)+{$pp-1})/{$pp}) FROM `table`

Для получения общего количества страниц $pc здесь использована достаточно известная формула $pc=(count+per_page-1) div per_page , но с поправкой на использование функции FLOOR вместо целочисленного деления (div). Можно использовать и оператор DIV, который поддерживается в MySQL достаточно давно.

Если на страницах нужно выводить только по одному элементу, представленные выше запросы можно упростить.

После того, как общее количество страниц $pc получено, можно сразу выводить ссылки на все страницы списка при помощи цикла со счетчиком в диапазоне от 1 до $pc , однако обычно используют более изысканную навигацию, при которой одновременно выводятся ссылки не на все страницы, а только на страницы с номерами в ограниченном зависящем от номера текущей страницы диапазоне. Например, вот формулы для получения ограничивающих диапазон значений $first и $last для так называемой банковой навигации:

$first=$pn-1-($pn-2)%$range; $last=$first+$range$pc) error(404); elseif ($result=mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) { $range=6; $first=$pn-1-($pn-2)%$range; $last=$first+$range>