Как сделать пагинацию css
Перейти к содержимому

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

  • автор:

Как сделать пагинацию используя HTML и JS и не сломать фильтр?

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

body < height: 100%; display: flex; align-items: center; justify-content: center; >.buttons < margin: 10px; display: flex; align-items: center; justify-content: center; gap: 20px; >.wrap < margin-top: 10px; width: 1024px; >.product-cover < width: 100%; height: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; >.card < height: 150px; width: calc(33.3333333% - 72px); border: 3px solid; border-color: black; color: white; text-align: center; line-height: 150px; >.gray < background-color: gray; >.red < background-color: red; >.pagination-cover < margin-top:94px; >.pagination < display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; text-decoration: none; >.pagination-item:not(:last-child) < margin-right:10px >.pagination-item a < padding-top:1px; font-weight:600; font-size:18px; line-height:32px; width:38px; text-align:center; border:2px solid #ebedec; color:#535b65; display:block; border-radius:0; text-decoration: none; >.pagination-item a i < vertical-align:1px; font-weight:900; color:#535b65; >.pagination-item.active a < border-color:#ffd910; background-color:#ffd910; >.pagination-item.active < pointer-events:none; >.pagination-item:hover a < border-color:#ffd910; >.pagination < list-style-type: none; justify-content: center; >.hide-filter
function app() < const buttons = document.querySelectorAll('.btn') const cards = document.querySelectorAll('.card') function filter (category, items) < items.forEach((item) => < const isItemFiltered = !item.classList.contains(category) const isShowAll = category === 'all' if (isItemFiltered && !isShowAll) < item.classList.add('hide-filter') >else < item.classList.remove('hide-filter') >>) > buttons.forEach((button) => < button.addEventListener('click', () =>< const currentCategory = button.dataset.filter filter(currentCategory, cards) >) >) > app()

Как мне правильно реализовать пагинацию таким образом, чтобы допустим на странице высвечивалось по 4 новые карточки, а остальные были скрыты?

Как при этом еще и не сломать фильтр, чтобы он подтягивал нужные из скрытых, пока не заполнит страницу до 4 карточек?

  • Вопрос задан более года назад
  • 1475 просмотров

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

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

Обновлено: 2022-10-23 17:27:50 Сергей Бензенко автор материала

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flexing pagination arrows

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

Flexing pagination arrows

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Красивая пагинация CSS на основе Bootstrap

Расскажу, как просто и сделать красиваю пагинацию (постраничное разделение) на CSS.

Ничего нового придумать не будем, возьмём за основу популярный фреймворк Bootstrap 3.

Демонстрация

На выходе мы получим такое:

Также можно отключать пункты меню и делать нужный элемент активным:

Установка

CSS

Установить CSS-код:

.pagination < display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; >.pagination > li < display: inline; >.pagination > li > a, .pagination > li > span < position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #428bca; text-decoration: none; background-color: #fff; border: 1px solid #ddd; >.pagination > li:first-child > a, .pagination > li:first-child > span < margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; >.pagination > li:last-child > a, .pagination > li:last-child > span < border-top-right-radius: 4px; border-bottom-right-radius: 4px; >.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus < color: #2a6496; background-color: #eee; border-color: #ddd; >.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus < z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; >.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus < color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd; >.pagination-lg > li > a, .pagination-lg > li > span < padding: 10px 16px; font-size: 18px; >.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span < border-top-left-radius: 6px; border-bottom-left-radius: 6px; >.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span < border-top-right-radius: 6px; border-bottom-right-radius: 6px; >.pagination-sm > li > a, .pagination-sm > li > span < padding: 5px 10px; font-size: 12px; >.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span < border-top-left-radius: 3px; border-bottom-left-radius: 3px; >.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span

HTML

Установите в нужном месте html-код:

Чтобы сделать элемент активным, добавьте класс active к тегу li:

Чтобы сделать элемент неактивным, добавьте класс disabled к тегу li:

Как реализовать пагинацию с помощью 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, чтобы передать читателям экрана назначение и роль таких элементов, как кнопки пагинации.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *