Пагінація, а якщо поптросту - посторінкова навігація, важливий елемент будь-якого мало-мальськи наповненого сайту. Різні системи управління сайтом, в більшості своїй, мають вбудовані інструменту для реалізації пагінацію. Так само існує маса окремих плагінів, написаних під цю корисну справу, в більшості випадків вони побудовані з використанням бібліотеки jQuery . Всі ці плагіни, різні і за стилем виконання і за функціональними можливостями, але головне все вони, це прекрасна альтернатива серверної реалізації розбивки об'ємного вмісту сайтів на сторінки.
Пропоную на розгляд, на мій погляд, один з найлегших jQuery плагінів, для створення посторінкового навігації, який допоможе вам організувати, привабливу і швидку нумерацію сторінок. 
Дуже легкий, як не глянь, і за вагою, і все що стосується підключення, налаштувань, жвавий плагін jQuery для створення нумерації сторінок, укомплектований трьома стилями оформлення, і заряджений на підтримку.
До речі, якщо вас не влаштують стандартні стилі, можете використовувати Набір стилів пагінацію на CSS3 , Який не складе великих труднощів прикрутити в .css плагіна. 
Тепер, давайте більш детально розглянемо, як правильно підключити сам плагін і стильовий файл до документа, тобто безпосередньо впровадити його на сторінки сайту, і пройдемося по доступним налаштувань плагіна.
Для початку, звичайно ж потрібно отримати плагін, тобто з кодами, в який дбайливо упаковані сам jquery javascript і файл стилів css.
Розберемо покроково, як використовувати плагін:
Крок 1. Підключення jQuery
У тілі сторінки в розділ <head> ... </ head> необхідно підключити фреймворк jQuery, бажано версії 1.7.2, або більш свіжої, зробити це можна використовуючи спеціальне сховище Google:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </ script>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </ script>
Або скористатися бібліотекою JQuery з архіву, попередньо помістивши її в папку з javascript у вас на сайті:
<Script type = "text / javascript" src = "папка з js / jquery.min.js"> </ script>
<Script type = "text / javascript" src = "папка з js / jquery.min.js"> </ script>
Якщо у вас на сайті jQuery вже включений і щосили працює, вся метушня описані вище, можете сміливо пропустити, головне стежте за тим, що б версія jQuery, не була надто дрімучої. У WordPress, до речі, з цим все в порядку.
Далі, підключаємо нашу робочу конячку - плагін jquery.simplePagination.js:
<Script type = "text / javascript" src = "папка з js / jquery.simplePagination.js"> </ script>
<Script type = "text / javascript" src = "папка з js / jquery.simplePagination.js"> </ script>
Крок 2. Підключення CSS
Щоб панель пагінацію виглядала належно, відповідно до загального дизайну, включаємо в роботу файл simplePagination.css з архіву, з трьома варіантами оформлення нумерації сторінок:
<Link type = "text / css" rel = "stylesheet" href = "css / simplePagination.css" />
<Link type = "text / css" rel = "stylesheet" href = "css / simplePagination.css" />
Можна не городити город, а просто вибрати потрібний вам стиль, світлий, темний або компактний і вставити набір правил в файл стилів .css вашого шаблону. Прописати свої власні стилі або скористатися Bootstrap, теж варіант, в плані оригінальності і розвитку навичок сайтобудування, навіть більш кращий.
Крок 3. HTML
Щоб вивести панель посторінковою навігації на сторінках сайту, там де ви плануєте її розмістити, логічніше і найчастіше, це внизу основного змісту, слід прописати наступне:
Для світлого фону:
<Div id = "light-pagination" class = "pagination"> </ div>
<Div id = "light-pagination" class = "pagination"> </ div>
Для пагінацію на темному тлі:
<Div id = "dark-pagination" class = "pagination"> </ div>
<Div id = "dark-pagination" class = "pagination"> </ div>
Компактна тема:
<Div id = "compact-pagination" class = "pagination"> </ div>
<Div id = "compact-pagination" class = "pagination"> </ div>
Крок 4.Ініціалізація плагіна
Після готовності документа, все що нам залишається зробити, це запустити плагін:
$ (Function () {$ (# light-pagination) .pagination ({items: 100, itemsOnPage: 10, cssStyle: 'light-theme'});});
$ (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».
Ми розглянули основні настройки. Про додаткові функції і доступні методи застосування цього плагіна, можете дізнатися вивчивши документацію безпосередньо на сторінці розробника.
Мені залишається тільки, побажати вам удачі і успіхів в роботі над вашими новими проектами.
* Driver *
джерело:
Буду вдячний, якщо поділитеся посиланням на цей запис в своїх соц.сетях:
