Html css код для пагінації приклади. Bootstrap – Pagination (навігаційний блок для пагінації). Підключення необхідних фреймворків

У статті розглянемо процес створення такого елемента веб-інтерфейсу як навігаційний блок для пагінації. У Bootstrap 3 та 4 цей елемент інтерфейсу реалізується за допомогою компонента Pagination.

Що таке пагінація?

Пагінація – це посторінковий висновок даних. Тобто. це такий висновок, коли дані виводятьсяне все одразу, а невеликими частинами (сторінками).

Для переміщення цими частинами (сторінками) використовується навігаційний блок.

Компонент 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 , який призначений для створення простої навігації сторінками або іншими матеріалами сайту. Складається цей компонент із двох кнопок (посилань).

Один з найпоширеніших варіантів застосування цієї навігації – це зробити так, щоб перша кнопка здійснювала перехід до більш нового записуна сайті, а друга - до старішої.

Синтаксис компонента Pager :

Зміна розташування кнопок

За замовчуванням, кнопки компонента Pager вирівнюються по центру. Але крім цього варіанта, Bootstrap 3 дозволяє їх ще вирівняти з різних боків. Здійснюється це за допомогою додавання до першої кнопки класу previous, а до другої - next. Клас previous вирівнює посилання на лівому краю, а next – на правому.

Вимкнення функціональності кнопки

Переведення кнопки у відключений стан здійснюється за допомогою додавання до неї класу disabled.

Пагінація, а якщо поптросту - посторінкова навігація, важливий елемент будь-якого більш-менш наповненого сайту. Різні системи управління сайтом, здебільшого, мають вбудовані інструменти для реалізації пагінації. Також існує маса окремих плагінів, написаних під цю корисну справу, в більшості випадків вони побудовані з використанням бібліотеки. Всі ці плагіни, різні і за стилем виконання та за функціональним можливостям, але головне всі вони, це чудова альтернатива серверній реалізації розбивки об'ємного змісту сайтів на сторінки.

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

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

До речі, якщо вас не влаштують стандартні стилі, можете використовувати , який не складе великої праці прикрутити в .cssплагіна.

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

Для початку, звичайно ж потрібно мати плагін, тобто з вихідними джерелами, в який дбайливо упаковані сам jquery javascriptта файл стилів CSS.

Розберемо покроково, як використовувати плагін:

Крок 1. Підключення jQuery

У тілі сторінки у розділ ...необхідно підключити фреймворк jQuery, бажано версії 1.7.2, або свіжішою, зробити це можна за допомогою спеціального сховища Google:

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

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

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

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

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

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