Как сделать пагинацию css

CSS Pagination Примеры

Узнайте, как создать отзывчивый разбиение на страницы с помощью CSS.

Простой Pagination

Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то пагинацией к каждой странице:

Для того, чтобы создать разбиение на страницы, стиль списка HTML:

пример

ul.pagination <
display: inline-block;
padding: 0;
margin: 0;
>

ul.pagination li a color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
>

Активный и Hoverable Pagination

Выделите текущую страницу с .active класса, а также использовать :hover селектор , чтобы изменить цвет каждой ссылки страницы при перемещении мыши над ними:

пример

ul.pagination li a.active <
background-color: #4CAF50;
color: white;
>

ul.pagination li a:hover:not(.active)

Округлые Активные и Hoverable Кнопки

Добавьте border-radius свойства , если вы хотите и кнопки округленный «активный» «парения»:

пример

ul.pagination li a <
border-radius: 5px;
>

ul.pagination li a.active border-radius: 5px;
>

Hoverable Эффект перехода

Добавьте transition собственности к ссылкам страницы , чтобы создать эффект перехода на парении:

пример

ul.pagination li a <
transition: background-color .3s;
>

Граничит Pagination

Используйте border собственности , чтобы добавить границы к пагинацией:

пример

ul.pagination li a <
border: 1px solid #ddd; /* Gray */
>

Округлые границы

Совет: Добавьте закругленные границы для вашей первой и последней ссылке в пагинацией:

пример

.pagination li:first-child a <
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
>

.pagination li:last-child a border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
>

Пространство между ссылками

Совет: Добавьте margin свойство , если вы не хотите , чтобы группа ссылок страницы:

пример

ul.pagination li a <
margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
>

Разбивка Размер

Изменение размера пагинацией с font-size собственности:

пример

ul.pagination li a <
font-size: 22px;
>

Сосредоточенный Pagination

Для размещения разбиения на страницы, обернуть контейнер элемента вокруг него (например , ), и добавьте text-align:center

пример

div.center <
text-align: center;
>

Еще примеры

пример

Панировочные сухари

Другой вариант пагинацией так называемые «хлебные крошки»:

пример

ul.breadcrumb <
padding: 8px 16px;
list-style: none;
background-color: #eee;
>

ul.breadcrumb li+li:before padding: 8px;
color: black;
content: «/\00a0»;
>

12 блестящих шаблонов пагинации страниц на основе HTML и CSS3

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

Простая навигация по страницам на основе CSS3

Эта навигация прекрасно работает даже при том, что она слегка старомодна на вид. Единственное, что вам потребуется, это div с применёнными к нему стилями. Скачайте исходный код с разметкой и стилями.

Навигация на основе CSS3

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

Адаптивная навигация

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

Навигация с плагином Tooltip

В отличие от других вариантов эта навигация показывает всплывающие подсказки при наведении курсора мыши с помощью плагина Tooltip .

Навигация с предварительным просмотром

Еще одна достойная упоминания пагинация страниц HTML с плагином Tooltip показывает миниатюрные картинки предпросмотра вместо обычного текста. Плавная анимация при наведении курсора мыши может вас заинтересовать.

Демо Подробнее / Скачать

Навигация на чистом CSS

Легкий шаблон навигации с исходным кодом разметки и стилей.

Тёмная навигация

Простой шаблон с тёмной темой.

Flexing pagination arrows

Скачайте полный набор файлов js , css и html и используйте этот шаблон навигации на своем сайте.

Навигация «Pagination One»

Стильный шаблон навигации c красивыми кнопками для пагинации на сайте .

Адаптивная навигация «Волшебная полоска»

Анимированная навигация, реализованная с помощью jQuery , которая перемещает полоску вдоль ряда номеров страниц.

Индикатор текущей страницы

Блестящая анимация кнопок с эффектом быстрого плавного переключения.

Демо Подробнее / Скачать

Мобильная навигация

Набор элементов навигации, который может впечатлить своей простотой. В этом пакете сразу реализовано несколько подходов к постраничной пагинации , которые можно использовать совершенно бесплатно.

Навигация с помощью слайдера

Старая, но до сих пор используемая навигация с помощью слайдера с невероятной функциональностью с использованием слайдера из плагина jQuery UI .

Демо Подробнее / Скачать

Пагинация — Постраничная навигация

Здесь вы узнаете, как сделать пагинацию или постраничную навигацию при помощи CSS.

Как сделать пагинацию

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

Шаг 1) Добавляем HTML:

  
« 1 2 3 4 5 6 » 
 

Шаг 2) Добавляем CSS:

 /* Ссылки пагинации */ .pagination a < color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; >/* Стили активной/текущей ссылки */ .pagination a.active < background-color: dodgerblue; color: white; >/* Добавляем серый фон при наведении мыши */ .pagination a:hover:not(.active)

Активная и наведенная ссылка с круглыми краями

Если вы хотите, чтобы активная и наведенная ссылка имели скругленные края, добавьте свойство border-radius :

 .pagination a < border-radius: 5px; >.pagination a.active

Плавный переход при наведении мыши

Чтобы создать эффект плавного перехода при наведении мыши, добавьте свойство transition :

 .pagination a

Рамка вокруг ссылок пагинации

Чтобы добавить рамку вокруг ссылок пагинации, используйте свойство border :

 .pagination a < border: 1px solid #ddd; /* Серый цвет */ >

Скругленные края рамки у первой и последней ссылок пагинации

Добавляем скругление у рамки первой и последней ссылок пагинации:

 .pagination li:first-child a < border-top-left-radius: 5px; border-bottom-left-radius: 5px; >.pagination li:last-child a

Отступы между ссылками пагинации

Добавьте свойство margin , если вы не хотите, чтобы ссылки пагинации не были прижаты друг к другу:

 .pagination a < margin: 0 4px; /* 0 - сверху и снизу. Можно выставить любые значения */ >

Размер пагинации

При помощи свойства font-size можно менять размер пагинации:

 .pagination a

Размещение пагинации по центру

Чтобы пагинация размещалась по центру, оберните ее в контейнерный элемент (например, ) со свойством text-align:center :

Как реализовать пагинацию с помощью HTML, CSS и JavaScript

В Интернете пагинация — это способ разбиения больших фрагментов содержимого на более мелкие части. В этой статье мы рассмотрим простой способ разделения содержимого на ряд «страниц» с помощью HTML, CSS и обычного JavaScript.

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

Создание базовой веб-страницы

Прежде чем приступить к реализации системы пагинации, давайте создадим HTML-структуру, хранящую содержимое, которое мы хотим отображать. Это может быть любое содержимое, но в данном учебном пособии мы будем использовать таблицу из пяти столбцов и 15 строк, в которой будут храниться имена учеников разных классов. Вот фрагмент нашего HTML:

article class="content"> 
table> 
thead> 
tr> 
th>Grade 1th> 
th>Grade 2th> 
th>Grade 3th> 
th>Grade 4th> 
th>Grade 5th> 
tr> 
thead> 
tbody> 
tr> 
td>Faith Andrewtd> 
td>Angela Christopher`td> 
td>David Eliastd> 
td>Samuel Thomastd> 
td>Richard Eliastd> 
tr> 
⋮ 
tbody> 
table> 
article>

Мы обернули таблицу в элемент-контейнер ( ). Хотя элемент-контейнер нам не нужен, его удобно иметь, особенно если на странице есть другие элементы. (Он создаёт полезный контекст для кнопок пагинации, которые мы будем добавлять).

Полный HTML-код с некоторыми элементами оформления можно посмотреть на CodePen.

Реализация функциональности пагинации с помощью JavaScript

После того как HTML и CSS созданы, остаётся реализовать постраничную навигацию. Сначала мы воспользуемся JavaScript для разделения таблицы на различные «страницы» и добавим функциональность кнопок для перехода по этим страницам.

Создание функции, разбивающей таблицу на страницы

Вот наш код для разделения таблицы на отдельные части:

document.addEventListener('DOMContentLoaded', function ()  
const content = document.querySelector('.content'); 
const itemsPerPage = 5; 
let currentPage = 0; 
const items = Array.from(content.getElementsByTagName('tr')).slice(1);

Первая строка создаёт слушатель событий, который обеспечивает выполнение JavaScript-кода после полной загрузки и разбора HTML-содержимого. Это делается для того, чтобы предотвратить любые манипуляции или взаимодействие с элементами до того, как содержимое станет доступным в DOM.

С помощью document.querySelector(‘.content’) мы выбираем обёртку и инициализируем её как переменную.

С помощью const itemsPerPage = 5; мы задаём количество строк для отображения на каждой странице.

С помощью let currentPage = 0; мы создаём переменную, которая отслеживает номер текущей страницы. Она начинается с 0, что означает первую страницу. (Первый индекс в JavaScript равен 0, поэтому отсчёт ведётся от 0, а не от 1).

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

Отработка функциональности showPage()

Далее поработаем над кодом для показа страниц:

function showPage(page)  
const startIndex = page * itemsPerPage; 
const endIndex = startIndex + itemsPerPage; 
items.forEach((item, index) =>  
item.classList.toggle('hidden', index  startIndex || index >= endIndex); 
>); 
updateActiveButtonStates(); 
>

Начнём с создания функции showPage() , принимающей параметр page . Эта функция отвечает за отображение элементов, связанных с данной страницей, при её вызове.

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

Таким образом, мы создаём диапазон отображаемых элементов. Например, допустим, у нас есть десять элементов, и мы хотим отображать по пять элементов на странице. Если мы находимся на первой странице ( page = 0 ), то startIndex будет равен 0, а endIndex будет равен 0 + 5 = 5. Этот диапазон ( [0, 5] ) включает в себя первые пять элементов. На следующей странице ( page = 1 ) startIndex будет равен 5, а endIndex — 5 + 5 = 10. Этот диапазон ( [5, 10] ) включает оставшиеся элементы.

С помощью функции items.forEach() мы создаём цикл, перебирающий каждую строку и проверяющий, попадает ли её индекс в диапазон элементов, которые будут отображаться на текущей странице, т.е. находится ли он до startIndex или после/равно endIndex . Если индекс находится в этом диапазоне, то ключевое слово toggle применяет к элементу класс hidden (который мы определим в нашем CSS-коде), эффективно скрывая его. Если индекс не удовлетворяет ни одному из условий, класс hidden удаляется, делая элемент видимым.

Наш класс hidden перемещает элементы за пределы экрана, скрывая их от глаз, но сохраняя доступность для пользователей программ чтения с экрана:

.hidden  
clip: rect(0 0 0 0); 
clip-path: inset(50%); 
height: 1px; 
overflow: hidden; 
position: absolute; 
white-space: nowrap; 
width: 1px; 
>

Добавление кнопок

Теперь рассмотрим, как добавить кнопки навигации. В приведённом ниже коде мы создадим и добавим функциональность кнопок на основе содержимого таблицы:

function createPageButtons()  
const totalPages = Math.ceil(items.length / itemsPerPage); 
const paginationContainer = document.createElement('div'); 
const paginationDiv = document.body.appendChild(paginationContainer); 
paginationContainer.classList.add('pagination');

Сначала мы создаём функцию createPageButtons() , которая будет хранить логику создания наших кнопок. Затем мы вычисляем общее количество страниц, необходимых для отображения нашей таблицы. Для этого мы делим общее количество элементов на желаемое количество элементов на странице. Полученный результат округляется в большую сторону с помощью функции Math.ceil() . Это гарантирует, что все строки элементов нашей таблицы будут заняты имеющимися страницами.

Затем мы создаём div для размещения динамически генерируемых кнопок страницы ( document.createElement(‘div’) ). Далее мы добавляем элемент в тело нашей HTML-структуры с помощью document.body.appendChild(paginationDiv) . (На самом деле мы ещё не указали ему место в структуре HTML. Сделаем это в ближайшее время.) Наконец, мы добавляем класс pagination к контейнеру кнопки, чтобы можно было использовать для него стили.

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

for (let i = 0; i  totalPages; i++)  
const pageButton = document.createElement('button'); 
pageButton.textContent = i + 1; 
pageButton.addEventListener('click', () =>  
currentPage = i; 
showPage(currentPage); 
updateActiveButtonStates(); 
>);

Цикл for имеет диапазон от 0 (это первая страница) до общего количества страниц минус 1.

В каждой итерации страницы с помощью метода document.createElement() создаётся новая отдельная кнопка страницы, увеличивающая номер страницы на 1 при каждом цикле.

Далее мы создаём слушатель события click и прикрепляем его к кнопкам страницы. При нажатии на кнопку будет выполняться функция обратного вызова слушателя события.

Вот объяснение функции обратного вызова:

• Переменная currentPage обновляется до текущего значения i , которое соответствует индексу кликнутой страницы.
• Функция showPage() вызывается с обновлённым значением currentPage , что приводит к отображению содержимого кликнутой страницы.

Завершая наш код создания кнопки, мы заканчиваем его следующим образом:

content.appendChild(paginationContainer); 
paginationDiv.appendChild(pageButton);

Мы добавляем наш контейнер кнопок в конец нашей обёртки .content , а затем помещаем наши кнопки внутрь контейнера button .

Подсветка активных кнопок

Чтобы сделать наши кнопки более удобными в использовании, добавим отличительный стиль к активной в данный момент кнопке. Создадим функцию, которая будет применять стили CSS-класса active к кнопке, когда её страница становится активной:

function updateActiveButtonStates()  
const pageButtons = document.querySelectorAll('.pagination button'); 
pageButtons.forEach((button, index) =>  
if (index === currentPage)  
button.classList.add('active'); 
> else  
button.classList.remove('active'); 
> 
>); 
>

Сначала мы извлекаем все кнопки пагинации с помощью document.querySelectorAll и присваиваем их переменной pageButtons .

Затем функция updateActiveButtonStates() с помощью цикла forEach поочерёдно проходит по каждой из этих кнопок и сравнивает её индекс со значением переменной currentPage .

Далее мы используем условный оператор if для назначения стилей класса active , если индекс кнопки совпадает с текущей страницей.

Если индекс кнопки не соответствует текущей странице, то класс active удаляется. Это гарантирует, что другие кнопки не сохранят класс active .

Для реализации этой возможности мы вызываем функцию updateActiveButtonStates() при каждом изменении или отображении страницы.

Вызов скрипта

Наш скрипт пагинации заканчивается следующими двумя строками:

createPageButtons(); 
showPage(currentPage);

Мы вызываем функцию createPageButtons() перед функцией showPage() . Это гарантирует, что кнопки будут созданы сразу после загрузки страницы.

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

Итоговый результат

Следующий Pen показывает итоговый результат.

Адаптация кода к другим сценариям

Созданный нами скрипт удобен для разбиения таблицы на ряд страниц. Но что делать, если наше содержимое не является таблицей? Вместо таблиц попробуем применить наш скрипт к другим видам содержимого.

Пагинация для элементов section

Вместо элемента таблицы разместим внутри нашего контейнера несколько элементов и посмотрим, как адаптировать наш скрипт. Вот наш базовый HTML:

article class="content"> 
section>section> 
section>section> 
section>section> 
section>section> 
section>section> 
article>

Нам нужно внести всего три очень простых изменения в наш скрипт:

document.addEventListener('DOMContentLoaded', function ()  
const content = document.querySelector('.content'); 
const itemsPerPage = 1; 
let currentPage = 0; 
const items = Array.from(content.getElementsByTagName('section')).slice(0);

Изменения заключаются в следующем:

• установить значение itemsPerPage равным 1, чтобы на каждой странице отображалась только одна секция
• изменить имя целевого тега на section , поскольку теперь мы перебираем элементы , а не
• установить значение slice() равным 0, что ограничивает выборку первым элементом секции (который имеет индекс 0)

Приведённая ниже демонстрация CodePen показывает это в действии.

Пагинация для неупорядоченного списка

и меняем элементы на элементы
:

ul class="content"> 
li>li> 
li>li> 
li>li> 
li>li> 
li>li> 
ul>

В нашем JavaScript мы сделаем всего два изменения:

• getElementsByTagName(‘section’) становится getElementsByTagName(‘li’)
• установим const itemsPerPage равной 2, чтобы показывать по два элемента списка на странице

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

Заключение

В этом руководстве мы научились реализовывать пагинацию с помощью HTML, CSS и JavaScript. Для тех, у кого не включён JavaScript (по каким-либо причинам), полный текст страницы по-прежнему доступен — просто без пагинации. Благодаря использованию семантических элементов страница по-прежнему доступна для клавиатуры. Кроме того, мы скрыли неактивное содержимое, переместив его за пределы экрана, а не использовали display: none , чтобы оно оставалось доступным для программ чтения с экрана.

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

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