- Теория
- Теория
Создаём пагинацию в каталоге
Интернет-магазин, над которым мы трудились в прошлых частях, отлично работает, но Кекс всё не успокоится. Он отказался от фильтров в каталоге и теперь хочет разделить его на страницы. На каждой странице должно быть не больше шести товаров. Разработчики называют постраничный вывод информации пагинацией.
Товары хранятся в массиве $products
, они все сейчас отображаются на странице каталога. В переменной $limit
записано, сколько товаров нужно показывать на странице. В нашем случае — 6
.
В переменной $offset
(в переводе с английского, «смещение») хранится порядковый номер первого товара на текущей странице. Если выводить по шесть товаров, то для первой страницы смещение будет 0
, для второй — 6
, для третьей — 12
и так далее.
Чтобы показать на странице лишь шесть товаров, используем встроенную функцию array_slice
. Мы познакомились с ней в прошлой части. Эта функция копирует часть исходного массива и возвращает её в виде нового массива.
Функция array_slice
принимает четыре аргумента. Чтобы получить товары для одной страницы, передадим функции следующие значения:
- исходный массив —
$products
, - первый элемент —
$offset
, - количество элементов —
$limit
, - сохранять ли ключи —
true
, потому что ключ — это идентификатор товара, он нужен, чтобы показать правильную информацию о товаре.
Для первой страницы смещение $offset
равно нулю, поэтому функция вернёт массив с первыми шестью товарами. Выведем полученный массив на страницу. После этого изменим значение переменной $offset
, чтобы посмотреть, как выглядят разные страницы каталога.
Чтобы было удобнее следить за смещением, Думпо временно добавил на карточки товаров их порядковые номера.
Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.