webdonsk.ruКак сделать пагинацию js
Добавил пользователь Владимир З. Обновлено: 10.09.2024
Узнать, как создать разбиение на страницы с помощью CSS.
Пагинация
Создать пагинацию
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Ссылки для разбиения на страницы */
.pagination a color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
>
/* Стиль активной/текущей ссылки */
.pagination a.active background-color: dodgerblue;
color: white;
>
/* Добавить серый цвет фона при наведении курсора мыши */
.pagination a:hover:not(.active)
Разбиение на страницы, или пагинация – это механизм для разделения больших результатов на отдельные страницы. При этом пользователю предоставляются инструменты для навигации по этим страницам.
Пагинация ресурсов в веб-приложениях может быть очень полезной не только с точки зрения производительности самого приложения, но и с точки зрения пользовательского опыта.
В этом руководстве вы узнаете, как создать динамический и многоразовый компонент разбивки на страницы для приложения Vue.js.
Требования
- Локальная установка Node.js. Инструкции по установке программы зависят от дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
- Базовое знакомство с настройкой проектов Vue.js.
Это руководство было протестировано на Node v16.4.0, npm v7.19.0 и Vue v2.6.11.
1: Настройка проекта
Компонент разбиения на страницы должен позволять пользователю переходить к первой и последней страницам, перемещаться вперед и назад и переходить непосредственно на ближайшую страницу в диапазоне.
Кнопки для перехода к первой, предыдущей странице, диапазону, следующей и последней странице мы будем отображать в следующем формате:
[first] [next] [1] [2] [3] [previous] [last]
Большинство приложений запрашивают API каждый раз, когда пользователь меняет страницу. Нам нужно убедиться, что наш компонент позволяет это сделать, но при этом мы не хотим делать запрос внутри компонента. Таким образом, мы обеспечим возможность многократного использования компонента во всем приложении. Кроме того, все запросы будут выполняться на уровне действий/сервисов. Чтобы добиться такого результата, нужно запускать событие с номером страницы, на которую щелкнул пользователь.
Существует несколько способов реализовать разбиение на страницы в конечной точке API.
Если API сообщает только об общем количестве записей, мы можем рассчитать общее количество страниц, разделив количество результатов на количество записей, расположенных на одной странице: totalResults/perPage.
В данном примере давайте предположим, что API сообщает нам количество результатов на страницу (perPage), общее количество страниц (totalPages) и текущую страницу (currentPage). Это будут наши динамические свойства.
Допустим, мы хотим отобразить диапазон страниц, но не хотим отображать все доступные страницы. Тогда давайте при помощи свойства в нашем компоненте (maxVisibleButtons) настроим максимальное количество видимых кнопок.
Итак, мы уже знаем, что мы хотим от компонента и какие данные нам понадобятся. Значит, мы можем установить структуру HTML и необходимые свойства.
Для создания нового проекта Vue можно использовать @vue/cli:
npx @vue/cli create –default vue-pagination-example
Затем перейдите в каталог нового проекта:
Создайте в нем файл Pagination.vue и откройте его в редакторе кода:
На данном этапе разработки компонент отображает список из четырех кнопок. Чтобы получить диапазон видимых кнопок, мы будем использовать цикл for.
Сейчас нужно убедиться, что это число никогда не превышает значения свойства, которое устанавливает максимальное количество видимых кнопок. Также оно не должно превышать количества доступных страниц.
Стартовый номер цикла зависит от текущей страницы:
- Если текущая страница является первой, приложение должно показывать пользователю текущую и следующие страницы.
- Если текущая страница является последней, приложение должно показывать последнюю и предыдущие страницы.
- Если текущей является любая страница между первой и последней, приложение должно отображать предыдущие и последующие страницы.
Конечное число цикла также требует некоторых вычислений. Нам нужно получить наименьшее число между общим количеством страниц и позицией, на которой мы хотим остановиться. Чтобы вычислить эту позицию, нужна сумма исходной позиции и максимального количества видимых кнопок. Поскольку слева от текущей страницы мы всегда хотим отображать одну кнопку, нам нужно вычесть 1 из этого числа.
Давайте воспользуемся вычисляемым свойством, которое возвращает массив объектов с диапазоном видимых страниц. У каждого объекта будет свойство с номером страницы и еще одно свойство, которое сообщит, должна ли кнопка быть отключена. В конце концов, мы же не хотим, чтобы пользователь нажимал на страницу, на которой он и так находится.
Вернитесь к файлу Pagination.vue и добавьте startPage() и pages():
На этом логика отображения кнопок готова.
2: Добавление прослушивателей событий
Теперь нам нужно сообщить родительскому компоненту, что пользователь нажал кнопку и какую именно кнопку он нажал.
Для этого нужно добавить к каждой из кнопок прослушиватель событий. Директива v-on позволяет прослушивать события DOM. В этом примере мы будем использовать сокращение v-on для прослушивания кликов.
Чтобы сообщить родительскому компоненту о событии, мы воспользуемся методом $emit для генерации события со страницей, по которой кликнули.
Также следует убедиться, что кнопки разбивки на страницы активны, только если страница доступна. Мы воспользуемся директивой v-bind, чтобы связать значение атрибута disabled с текущей странице (мы снова используем сокращение).
Чтобы шаблон был чище, мы используем вычисленные свойства, которые проверят, следует ли отключить кнопку. Использование вычисленных свойств также приведет к кэшированию значений. Это означает, что до тех пор, пока currentPage не изменится, другие запросы для того же вычисляемого свойства будут возвращать ранее вычисленный результат без необходимости повторного запуска функции.
Вернемся к файлу Pagination.vue, добавим проверку для текущей страницы и методы отслеживания событий (кликов):
3: Добавление стилей
Теперь, когда наш компонент проверяет все необходимые функции, нам нужно добавить немного CSS, чтобы он больше напоминал компонент нумерации страниц, а не список.
Конечно, мы также хотим, чтобы пользователи могли четко определять, на какой странице они находятся. Для этого мы изменим цвет кнопки, которая отвечает за текущую страницу.
Это можно сделать, привязав HTML-класс к кнопке активной страницы через синтаксис объекта. При использовании синтаксиса объекта для привязки имен классов Vue автоматически переключает класс при изменении значения.
Хотя каждый блок внутри директивы v-for имеет доступ к свойствам родительской области, мы будем использовать method, чтобы проверить, активна ли страница. Такой подход сделает шаблон более чистым.
Добавим в файл pagination.vue проверку активной страницы, а также стили и классы CSS:
Итак, логика стилизации активных кнопок готова, идем дальше.
4: Использование компонента
На данном этапе компонент можно использовать в приложении. Для этого нужно смоделировать вызов API, указав значения для totalPages и perPage.
В этом примере строка currentPage должна иметь значение 1, а onPageChange отключит кнопку активной страницы.
На этом этапе вы можете запустить приложение:
Откройте приложение в браузере и посмотрите на нумерацию страниц. Там будут кнопки First, Previous, Next и Last. Также там будут отображаться кнопки для трех из десяти страниц. Поскольку первая страница является текущей, кнопка 1 отмечена как активная. Кроме того, по этой же причине кнопки First и Previous будут отключены.
Пагинация – это постраничный вывод данных. Т.е. это такой вывод, когда данные выводятся не все сразу, а небольшими частями (страницами) .
Для перемещения по этим частям (страницам) используется навигационный блок.
Компонент Pagination фреймворка Bootstrap как раз и предназначен для создания этого элемента интерфейса, т.е. навигационного блока .
Создание навигационного блока для пагинации
В Bootstrap 3 навигационный блок имеет следующую структуру:
Элемент nav в этом фрагменте играет роль обёрточного контейнера. Необходим он в этой структуре только для того, чтобы вспомогательные технологии воспринимали данный фрагмент HTML кода как навигацию.
Кроме этого, вспомогательным технологиям желательно ещё пояснить, что это за блок навигации. Осуществляется это действие посредством атрибута aria-label .
Разметка навигационного блока для пагинации в Bootstrap выполняется с помощью маркированного списка . Каждая навигационная ссылка в этом блоке – это элемент a , обёрнутый в li и помещённый в ul .
Визуальное оформление навигационного блока в Bootstrap осуществляется с помощью класса pagination , который необходимо добавить к ul .
Структура навигационного блока в Bootstrap 4 :
Обратите внимание, что в Bootstrap 4 к элементам li и a необходимо добавить классы . К li - класс page-item , а к a - page-link . Эти классы задают CSS стили элементам и необходимы для корректного отображения навигационного блока.
Использования вместо текстовых надписей значков или иконок
Пример навигационной панели для пагинации, в которой в качестве контента некоторых ссылок используются значки:
Изменение состояния навигационной ссылки
Изменения состояния ссылок в навигационной панели выполняется с помощью классов disabled и active . Первый класс ( disabled ) используется для создания не активной (не кликабельной) ссылки. Второй класс ( active ) необходим для выделения (указания) текущей страницы . Добавлять классы active и disabled нужно не к самой ссылке, а к элементу li .
Класс disabled устанавливает ссылки CSS объявление pointer-events: none . Данное объявление предназначено для отключения функциональности ссылки. Но оно не отключает переход на неё с помощью клавиатуры. Поэтому, если вы хотите в своём проекте полностью отключить функциональность таких ссылок, то их с помощью JavaScript необходимо дополнительно отслеживать и добавлять к ним атрибут tabindex="-1" .
Ещё один способ отключить функциональности ссылок - это не использовать элемент а .
Изменение размеров навигационного блока
В Bootstrap 3 и 4 изменить размеры навигационного блока можно с помощью классов pagination-lg и pagination-sm . Выполняется это посредством добавления одного из этих классов к классу pagination .
Первый класс ( pagination-lg ) используется тогда, когда необходимо увеличить размеры навигации, а второй ( pagination-sm ) - когда уменьшить .
Выравнивание навигационного блока
В Bootstrap 3 выравнивание навигационной панели для пагинации осуществляется с помощью классов для выравнивания текста .
В Bootstrap 4 выравнивание навигационной панели для пагинации осуществляется с помощью flex-классов .
Компонент Pager (Bootstrap 3)
Pager – это компонент Bootstrap 3 , который предназначен для создания простой навигации по страницам или другим материалам сайта. Состоит этот компонент из 2 кнопок (ссылок).
Один из самых распространенных вариантов применения этой навигации - это сделать так, чтобы первая кнопка осуществляла переход к более новой записи на сайте, а вторая - к более старой.
Синтаксис компонента Pager :
Изменение расположения кнопок
По умолчанию, кнопки компонента Pager выравниваются по центру . Но кроме этого варианта, Bootstrap 3 позволяет их ещё выровнять по разным краям . Осуществляется это посредством добавления к первой кнопке класса previous , а ко второй - next . Класс previous выравнивает ссылку по левому краю, а next – по правому.
Отключение функциональности кнопки
Перевод кнопки в отключенное состояние осуществляется посредством добавления к ней класса disabled .
Дано:
Количество записей на странице
Количество всех страниц
Количество всех записей.
С этими данными сейчас выводятся страницы все подряд и это очень не красиво выглядит.
Так как статьи будут только умножаться, то количество ссылок на страницы будет расти.
Как сделать чтобы была допустим первая страница, затем те на которой мы находимся, справа и слева от нее две-три и последняя страница?
1. Вывести первую
2. Вывести ту на которой находимся и справа и слева от неё две-три
3. Вывести последнюю
4. PROFIT
Нужен пример кода.
Тут есть нюансы типа: На какой странице мы сейчас находимся, здесь нужны правильные проверки на количество, а то вдруг страниц всего две, а выведется две справа и две слева, плюс первая, тогда получится 1 -1 1 2 3 4 2 (если мы на второй находимся.
Прошу помощи с кодом
Вообще-то сервер должен формировать навигатор, и почему не устраивает задание ширины навигатора с переходами на каждую из частей страниц определяемых этой шириной?
Я вот так на PHP делал:
Итого получается примерно такой код:
P.S.: мой код конечно не идеален, но я особо не заморачивался.
P.P.S: только сейчас узнал, что это пагинацией называется. Пошёл менять названия классов и ф-ций.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
У всех все неправильно, один я в белом. Решение давно известно, вот такое
задается макс слотов, скажем 10
в эти 10 слотов загоняется весь интерфейс с кнопками, логика построения которого такова:
если паг меньше кол-ва слотов - вывести континуально
если паг больше - задать минимальный охват континуума, скажем в 5 страниц, а все остальное поделить между квантами начала и конца, особенно важен конец который показывает юзеру что ему ни в жизнь дотудова не домотать. Ну то есть общее количество страниц должно сохраняться всегда.
Например мы на первой странице где их 12
Как видите разрыв шаблона начинается со страницы 7. Потому что континуум 5 слотов, а когда он целиком влезает, к нему континуально добавляется неиспользуемый квант начала. Если домотать до страницы 7, то получим
. - hellip'ы - тоже кнопки, это третья кнопка в боковых отростках которая имеет номер страницы как обычно, но рендерится в качестве индикатора разрыва континуума
Теперь если мотать дальше, то неразрывный диапазон переедет к концу и там захапает отросток
Он так и будет сдвигаться вправо пока не упрется в конец номеров и на последней странице получится
Такая логика обеспечивает всегда отображение начала и конца диапазона страниц и небольшой промежуток для навигации вокруг выбранной.
Такая логика на многих коммерческих сайтах применена. Я по внешним признакам писал код, он на php. Готовый для такой логики найти не удалось, кругом были баяны.
Читайте также: