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

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

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

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

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

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

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

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

Шаг 1. Подключение jQuery

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

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

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

Шаг 3. HTML

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

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

$(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».

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

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

В этой статье рассмотрим процесс создания такого элемента веб-интерфейса как навигационный блок для пагинации. В Bootstrap 3 и 4 этот элемент интерфейса реализуется с помощью компонента Pagination.

Что такое пагинация?

Пагинация – это постраничный вывод данных. Т.е. это такой вывод, когда данные выводятся не все сразу, а небольшими частями (страницами) .

Для перемещения по этим частям (страницам) используется навигационный блок.

Компонент Pagination фреймворка Bootstrap как раз и предназначен для создания этого элемента интерфейса, т.е. навигационного блока .

Создание навигационного блока для пагинации

В Bootstrap 3 навигационный блок имеет следующую структуру:

• Предыдущая
• 1
• 2
• 3
• Следующая

Элемент nav в этом фрагменте играет роль обёрточного контейнера. Необходим он в этой структуре только для того, чтобы вспомогательные технологии воспринимали данный фрагмент HTML кода как навигацию .

Кроме этого, вспомогательным технологиям желательно ещё пояснить, что это за блок навигации. Осуществляется это действие посредством атрибута aria-label .

Разметка навигационного блока для пагинации в Bootstrap выполняется с помощью маркированного списка . Каждая навигационная ссылка в этом блоке – это элемент a , обёрнутый в li и помещённый в ul .

Визуальное оформление навигационного блока в Bootstrap осуществляется с помощью класса pagination , который необходимо добавить к ul .

Структура навигационного блока в Bootstrap 4 :

• Предыдущая
• 1
• 2
• 3
• Следующая

Обратите внимание, что в Bootstrap 4 к элементам li и a необходимо добавить классы . К li - класс page-item , а к a - page-link . Эти классы задают CSS стили элементам и необходимы для корректного отображения навигационного блока.

Использования вместо текстовых надписей значков или иконок

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

• Первая
• « Предыдущая
• 1
• 2
• 3
• » Следующая
• Последняя

Изменение состояния навигационной ссылки

Изменения состояния ссылок в навигационной панели выполняется с помощью классов disabled и active . Первый класс (disabled ) используется для создания не активной (не кликабельной) ссылки. Второй класс (active ) необходим для выделения (указания) текущей страницы . Добавлять классы active и disabled нужно не к самой ссылке, а к элементу li .

• Предыдущая
• 1
• 2
• 3
• Следующая

• Предыдущая
• 1
• 2
• 3
• Следующая

Класс disabled устанавливает ссылки CSS объявление pointer-events: none . Данное объявление предназначено для отключения функциональности ссылки. Но оно не отключает переход на неё с помощью клавиатуры. Поэтому, если вы хотите в своём проекте полностью отключить функциональность таких ссылок, то их с помощью JavaScript необходимо дополнительно отслеживать и добавлять к ним атрибут tabindex="-1" .

Ещё один способ отключить функциональности ссылок - это не использовать элемент а .

• Предыдущая
• 1
• 2
• 3
• Следующая

Изменение размеров навигационного блока

В Bootstrap 3 и 4 изменить размеры навигационного блока можно с помощью классов pagination-lg и pagination-sm . Выполняется это посредством добавления одного из этих классов к классу pagination .

Первый класс (pagination-lg ) используется тогда, когда необходимо увеличить размеры навигации, а второй (pagination-sm ) - когда уменьшить .

• Предыдущая
• 1
• 2
• 3
• Следующая

• Предыдущая
• 1
• 2
• 3
• Следующая

Выравнивание навигационного блока

В Bootstrap 3 выравнивание навигационной панели для пагинации осуществляется с помощью классов для выравнивания текста .

В Bootstrap 4 выравнивание навигационной панели для пагинации осуществляется с помощью flex-классов .

Компонент Pager (Bootstrap 3)

Pager – это компонент Bootstrap 3 , который предназначен для создания простой навигации по страницам или другим материалам сайта. Состоит этот компонент из 2 кнопок (ссылок).

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

Синтаксис компонента Pager :

• Предыдущая
• Следующая

Изменение расположения кнопок

По умолчанию, кнопки компонента Pager выравниваются по центру . Но кроме этого варианта, Bootstrap 3 позволяет их ещё выровнять по разным краям . Осуществляется это посредством добавления к первой кнопке класса previous , а ко второй - next . Класс previous выравнивает ссылку по левому краю, а next – по правому.

• Предыдущая
• Следующая

Отключение функциональности кнопки

Перевод кнопки в отключенное состояние осуществляется посредством добавления к ней класса disabled .

• ← Предыдущая
• Следующая →

C ollection of free HTML and CSS pagination code examples: responsive, simple, material design, navigation dots , etc. Update of June 2018 collection. 5 new items.

Related Articles
About the code

Responsive pagination/pager in HTML and CSS. Resize your browser to show interesting effect.

Responsive: yes

Dependencies: bootstrap.css

About the code Line Follow Pagination

CSS line follow pagination.

Responsive: yes

Dependencies: -

About the code Pagination Buttons

Pure CSS pagination buttons.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Line Pagination with Hover

Pure CSS line pagination with hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code Pacman Pagination

Pagination animation with HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Simple CSS .

About the code

Pure CSS Pac-Man pagination with animation on hover.

About the code

Simple responsive pagination.

About the code

HTML and CSS pagination.

About the code

Pagination example that allows you to navigate between different pages. This example would have to have href attributes in order to work with an actual application that requires pagination.

About the code

Pagination with CSS custom properties.

Pagination options and designs.
Made by MojoM
May 25, 2017

Demo GIF: SVG Page Hopper

HTML, CSS and SVG page hopper.
Made by Chris Gannon
May 14, 2017

Demo GIF: Infinite Pagination

Infinite pagination in HTML and CSS.
Made by Mariusz Dabrowski
April 27, 2017

About the code

CSS Components: .

12 ideas for website pagination with HTML and CSS.
Made by Rosa
November 3, 2016

Demo GIF: Pagination

Pagination with HTML/CSS/JavaScript.
Made by JP Nothard
October 9, 2016

Demo GIF: Pagination Hover Animation

HTML and CSS pagination hover animation.
Made by Elena Nazarova
September 12, 2016

Pagination with a hover effect.
Made by Andre Wichert
August 27, 2016

Pagination indicators with HTML, CSS and JavaScript.
Made by Moses Holmström
August 19, 2016

Made by Brendan Mullins
August 16, 2016

Responsive Magic Line Pagination

Create a magic line for your pagination. It looks awesome.
Made by Ryan Yu
February 18, 2015

Responsive, accessible, alternate pagination experiment.
Made by Simon Goellner
November 11, 2014

Demo GIF: Pagination Arrows

Flexing pagination arrows.
Made by Hakim El Hattab
October 18, 2013

Сайты, как правило, содержат в себе несколько страниц. На них может располагаться как 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>