Пагинация, а если поптросту — постраничная навигация, важный элемент любого мало-мальски наполненного сайта. Различные системы управления сайтом, в большинстве своем, имеют встроенные инструмента для реализации пагинации. Так же существует масса отдельных плагинов, написанных под это полезное дело, в большинстве случаев они построены с использованием библиотеки . Все эти плагины, разные и по стилю исполнения и по функциональным возможностям, но главное все они, это прекрасная альтернатива серверной реализации разбивки объемного содержания сайтов на страницы.
Предлагаю на рассмотрение, на мой взгляд, один из самых легких 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».
Мы рассмотрели самые основные настройки. О дополнительных функциях и доступных методах применения этого плагина, можете узнать изучив документацию непосредственно на странице разработчика.
Мне остается только, пожелать вам удачи и успехов в работе над вашими новыми проектами.
Сайты, как правило, содержат в себе несколько страниц. На них может располагаться как 3-5 страниц, например на landing-page, а может быть и больше, намного больше.
Каждый хороший сайт должен содержать в себе навигацию, которая позволит пользователю правильно ориентироваться и перемещаться между страницами сайта. Создать такую пагинацию можно при помощи JavaScript. В этой статье мы поговорим о том, как создать такую навигацию.
Ещё один момент, кроме обычного JavaScript, в примере используется Bootstrap 4. Его компонент bootstrap pagination сочетается с библиотекой JQuery, а именно специальным плагином Buzina Pagination. Он позволяет разбивать всю информацию на несколько страниц с созданием навигации между ними.
Подключение необходимых фреймворковЧтобы работать с Bootstrap и JQuery, их нужно подключить. Это можно сделать в вашем HTML документе, с помощью тегов . Создаем 3 парных тега ;. В них подключим Ajax.js, bootstrap 4 и сам плагин JQuery.
Чтобы правильно подключить bootstrap нужно также использовать тег , в его атрибуте href мы указываем ссылку на наш фреймоворк. В нем будет указываться ссылка на стили, которые содержит плагин.
Итак, мы подключили всё необходимое для работы. Осталось только подключить плагин для создания пагинации — Buzina Pagination. Для его создания мы также создаем теги и . В атрибутах "href" и "src" вводим одну и ту же ссылку.
Плагины Buzina Pagination и Bootstrap, помимо скриптов, содержат также и необходимые стили. Их мы и подключаем через тег ;. Теперь запомните — даже если вы неплохо разбираетесь в CSS, не рекомендуем вам заходить и менять настройки плагинов. Ради интереса, вы можете открыть их в кодовом редакторе и просмотреть, но не забудьте предварительно сохранить исходную версию кода.
В вашем HTML документе должен располагаться следующий код:
Pagination для сайта при помощи jQuery: Bootstrap 4
.container { margin: 150px auto; }
Разметка страниц. HTML
Во всех наших статьях мы рассматривали создание 1 HTML страницы, в этом же примере мы создадим сразу несколько, через один документ. При этом, мы не будем располагать их по разным ссылкам, переход по ним будет доступен при нажатии на кнопку. Для каждой страницы мы создадим отдельный блок.
В нашем примере мы создаем всего 5 страниц. Создайте для каждой из них отдельный блок div. Внутри можете написать какой-нибудь текст, для визуального отображения. Если хотите, можете создать 10, 20 и 30 страниц.
Для работы с ними вам не потребуются классы и идентификаторы. Главное, чтобы все эти страницы располагались внутри основного блока с классом example.
Функции JQuery
Вам нужно подключить несколько функций:
Заключение
Мы закончили создание пагинации. В итоге, что у нас получилось? Мы имеем хорошо стилизованную навигацию, которая отлично подойдет для вашего сайта. Добавить несколько элементов и вы сможете адаптировать её для страниц, которые будут у вас расположены.
Можете изменить скрипты по своему желанию, но только если хорошо разбираетесь в JavaScript. Главное не меняйте значения скриптов и стилей плагинов.
Такая пагинация имеет огромное преимущество — удобство использования. Пользователю не нужно будет грузить дополнительные ссылки для перехода между страницами.
Тем более, что из-за небольшого количества применяемых скриптов, оптимизация не будет сильно снижена.
Теги:Пагинация, включая навигацию по страницам, – достаточно простая вещь, но у начинающих часто возникают проблемы с ее созданием, а главное, пониманием ее работы...
Одной из задач пагинации является одновременный вывод не всех элементов, а их ограниченного числа, скажем, не более $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>