Bootstrap – Pagination (навігаційний блок для пагінації). Bootstrap - Pagination (навігаційний блок для пагінації) Що таке пагінація

Сайти, як правило, містять кілька сторінок. На них може розташовуватися як 3-5 сторінок, наприклад, на landing-page, а може бути і більше, набагато більше.

Кожен добрий сайт повинен містити в собі навігацію, яка дозволить користувачеві правильно орієнтуватися та переміщатися між сторінками сайту. Створити таку пагінацію можна за допомогою JavaScript. У цій статті ми поговоримо про створення такої навігації.

Ще один момент, окрім звичайного JavaScript, у прикладі використовується Bootstrap 4. Його компонент bootstrap pagination поєднується з бібліотекою JQuery, а саме спеціальним плагіном Buzina Pagination. Він дозволяє розбивати всю інформацію на кілька сторінок із створенням навігації між ними.

Підключення необхідних фреймворків

Щоб працювати з Bootstrap та JQuery, їх потрібно підключити. Це можна зробити у вашому HTML документі, за допомогою тегів

Якщо у вас на сайті 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».

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

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

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

Одним із завдань пагінації є одночасне виведення не всіх елементів, а їх обмеженого числа, скажімо, не більше $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?$first+$range:$pc;

У $range потрібно помістити значення на 1 менше необхідної ширини діапазону, наприклад для виведення не більше ніж семи регулярних посилань на сторінки в $range потрібно помістити значення 6. Якщо об'єднати все вище написане, вийде так:

$ pp = 10; if ($result=mysqli_query($link,"SELECT FLOOR((COUNT(*)+".($pp-1).")/".$pp.") FROM `table`")) ( list($ pc)=mysqli_fetch_row($result); =mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$pn-1- ($pn-2)%$range;$last=$first+$range<$pc?$first+$range:$pc; } else error(503); } else error(503);

Залишається лише вивести рядок навігації:

У представленій реалізації перше регулярне посилання (якщо це не посилання на першу сторінку) дозволяє перемикатися на попередній банк сторінок. Якщо потрібно, щоб останнє регулярне посилання дозволяло так само перемикатися на наступний банк сторінок (тобто працювала аналогічно до посилання «Ще» і могла його замінити), можна в першій формулі як дільник замість змінної $range вказати вираз ($range-1) .

Функція pagelink відповідає за формування частини посилання, в якій задається номер сторінки. З використанням ротатора номерів сторінок 0 і 1 цю функцію краще розмістити поруч із ротатором, т.к. вона повинна компенсувати дію ротатора, дозволяючи отримати в посиланні адресу / замість /?p=1 для відповідності нульовому значенню вхідного параметра $pn:

Function pagelink($p) ( return $p>1?"?p=".$p:""; ) if ($pn==0) $pn++; elseif ($pn==1) $pn--;