Пагінація на сайті з використанням pdoPage

параметри
підтримка Ajax
Вбудована Ajax пагінація
Завантаження кнопкою
Завантаження при прокручуванні
History API
Функції зворотного виклику
человекопонятний навігація
приклади

Наша взаимовыгодная связь https://banwar.org/

Сніппет pdoPage дозволяє вивести результати роботи інших фрагментів з розбивкою на сторінки.

Є кілька серйозних відмінностей від сниппета getPage:

2 види пагінацію: з пропуском сторінок і класична (залежить від параметра & pageLimit).
Пагінація не плаває. Якщо вказано показувати 5 посилань на сторінки - завжди буде 5 і не більше.
Можна вказати чанкі для виведення за відсутності посилань на першу, останню, наступну або попередню сторінку.
Параметр & maxLimit не дозволяє користувачеві загальмувати ваш сайт великий вибіркою.
Редирект на першу сторінку за відсутності результатів або некоректному параметрі & page.
Працює зі сніпетів pdoResources, за замовчуванням.
Поддерка роботи через ajax.

параметри

При виклику сниппета pdoPage вказуються параметри сниппета, для якого проводиться пагінація. Даний сниппет повинен розуміти параметри & page і & limit. За замовчуванням pdoPage приймає всі параметри pdoTools і крім того, деякі свої:

підтримка Ajax

pdoPage може видавати JSON і переривати роботу движка при відповідно запиту трьом характеристикам:

У сниппета включений параметр & ajax.
Запит зроблений за допомогою XMLHttpRequest, тобто - ajax.
У запиті міститься змінна, зазначена у сниппета в & pageVarKey. За замовчуванням, це page.

Тобто, вам досить просто вказати сніпетів & ajax = `1` і відправити сторінці GET запит типу:

$ .Get ( 'document.html? Page = 5', function (response) {console.log (response);}, 'json');

І у відповідь ви отримаєте JSON c результатами роботи, пагінацією і службовими даними: номер сторінки, скільки всього сторінок і скільки всього результатів. З огляду на, що pdoPage - це сниппет-обгортка, таким чином ви можете змусити працювати через ajax багато інших сніппети.

Вбудована Ajax пагінація

Починаючи з версії 1.10 pdoPage вміє завантажувати сторінки через ajax. Вам потрібно лише обернути його виклик в спеціальну розмітку:

<Div id = "pdopage"> <div class = "rows"> [[! PdoPage? & Parents = `0` & ajaxMode =` default`]] </ div> [[! + Page.nav]] </ div>

Усередині [[+ page.nav]] у нас div з класом pagination - так в pdoPage за замовчуванням.

Ви можете змінювати ідентифікатори цієї розмітки наступними параметрами:

ajaxElemWrapper - jQuery селектор елемента-обгортки з результатами і пагінацією. За замовчуванням #pdopage.
ajaxElemRows - jQuery селектор елемента з результатами. За замовчуванням #pdopage .rows
ajaxElemPagination - jQuery селектор елемента з пагінацією. За замовчуванням #pdopage .pagination
ajaxElemLink - jQuery селектор посилання на сторінку. За замовчуванням #pdopage .pagination a

Два останніх селектора розраховують на те, що ви не міняли стандартне оформлення блоку пагінацію в параметрі & tplPageWrapper. Робота забезпечується підключенням javascript файлу з параметра & frontent_js.

Параметр & ajax = `1` вказувати необов'язково. Чи не порожній & ajaxMode активує його самостійно.

Завантаження кнопкою

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

Так що, логічно його розміщувати вгорі:

<Div id = "pdopage"> [[! + Page.nav]] <div class = "rows"> [[! PdoPage? & Parents = `0` & ajaxMode =` button` & limit = `5`]] </ div> </ div>

Використовуються все ті ж селектори, плюс:

ajaxElemMore - jQuery селектор кнопки завантаження результатів при ajaxMode = button. За замовчуванням #pdopage .btn-more.
ajaxTplMore - Шаблон кнопки для завантаження нових результатів при ajaxMode = button. Повинен включати селектор, вказаний в & ajaxElemMore. За замовчуванням @INLINE <button class = "btn btn-default btn-more"> [[% pdopage_more]] </ button>

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

Якщо висновок плаваючого блоку в пагінацією не потрібен, то просто зробіть йому display: none в вашому css.

Завантаження при прокручуванні

Цей спосіб дуже схожий на попередній, тільки немає кнопки і її не потрібно натискати - все робиться автоматично при прокручуванні сторінки.

<Div id = "pdopage"> [[! + Page.nav]] <div class = "rows"> [[! PdoPage? & Parents = `0` & ajaxMode =` scroll`]] </ div> </ div>

History API

pdoPage підтримує роботу з History API вашого браузера. Це означає, що коли & ajaxMode включений, сниппет може зберігати номер сторінки в адресному рядку, щоб при перезавантаженні нічого не втрачалося. Також правильно працює навігація кнопками "вперед \ назад" браузера.

Ви можете змінити цю поведінку параметром & ajaxHistory, включивши або вимкнувши його. За замовчуванням він працює наступним чином:

Якщо ajaxMode встановлений в default, то History API використовується, номер сторінки зберігається.
Якщо ajaxMode встановлений в scroll або button, то History API не використовується.

При відключенні & ajaxHistory блок в посторінковою навігацією ховається, щоб сторінки не можна було перемикати вручну.

Функції зворотного виклику

Ви можете вказати функції, які будуть викликатися до і після завантаження сторінки через ajax ось так:

pdoPage.callbacks [ 'before'] = function (config) {console.log ( 'Конфиг перед завантаженням!', config); }; pdoPage.callbacks [ 'after'] = function (config, response) {console.log ( 'Конфиг після завантаження!', config); console.log ( 'Відповідь від сервера!', response); }

З версії 1.11.0-pl з'явилася можливість додавання обробника на подію pdopage_load:

$ (Document) .on ( 'pdopage_load', function (e, config, response) {console.log (e, config, response);});

Перевірка даних в config дозволить вам розрізнити різні виклики pdoPage на одній сторінці.

человекопонятний навігація

З версії 2.2.2 можна використовувати параметр & pageLinkScheme для вказівки схеми генерації посилань на сторінку. У параметрі може бути всього 2 плейсхолдера:

[[+ PageVarKey]] - змінна з ім'ям сторінки. За замовчуванням page.
[[+ Page]] - номер сторінки

Для прикладу вкажіть такий параметр:

[[! PdoPage? & Parents = `0` & pageLinkScheme =` / [[+ pageVarKey]] - [[+ page]] `]] [[! + Page.nav]]

Це призведе до генерації посилань, типу

/ Res / news / / res / news / page-2 / res / news / page-3

При переході по цих посиланнях (крім першої) MODX видаватиме помилку 404, тому що сторінок з цими адресами не існує. Так що, нам потрібно написати плагін для їх обробки:

<? Php // Реагуємо тільки на подію OnPageNotFound if ($ modx-> event-> name == 'OnPageNotFound') {// Визначаємо ключ запиту з налаштувань $ req = $ modx-> getOption ( 'request_param_alias'); // Ловимо потрібний ключ сторінки $ pageVarKey = 'page'; // Якщо в запиті повторюється наш шаблон "pageVarKey-page", то працюємо далі if (preg_match ( "#. *? ({$ PageVarKey} - (\ d +)) #", $ _REQUEST [$ req], $ matches) ) {// Отрезаем ЧПУ рядок і отримуємо точну адресу поточної сторінки $ uri = str_replace ($ matches [1], '', $ matches [0]); // Шукаємо сторінку за цією адресою $ id = 0; // Спочатку як є, зі слешем на кінці if (! $ Id = $ modx-> findResource ($ uri)) {// Якщо не знаходимо - то пробуємо відрізати слеш і шукаємо повторно $ id = $ modx-> findResource (rtrim ($ uri, '/')); } // Якщо ресурс знайдений if ($ id) {// Додаємо номер сторінки в глобальні масиви, щоб pdoPage їх там побачив $ _GET [$ pageVarKey] = $ _REQUEST [$ pageVarKey] = $ matches [2]; // І завантажуємо цю сторінку $ modx-> sendForward ($ id); } // Якщо ресурс не був знайдений - нічого не робимо, можливо запит зловить інший плагін}}

Тепер цей плагін буде обробляти вашу ЧПУ навігацію.

приклади

Так як pdoPage є частиною pdoTools, в параметрі & element у нього відразу прописаний сниппет pdoResources. Тому простий виклик сниппета виведе вам дочірні ресурси:

[[! PdoPage? & Tpl = `@ INLINE <p> [[+ idx]] <a href="/[[+uri]]"> [[+ pagetitle]] </a> </ p>`]] [[! + Page .nav]]

Виводимо всі можливі документи сайту:

[[! PdoPage? & Tpl = `@ INLINE <p> [[+ idx]] <a href="/[[+uri]]"> [[+ pagetitle]] </a> </ p>` & parents = `0`]] [[! + page.nav]]

Включаємо навігацію з пропуском сторінок. Зверніть увагу, що якщо сторінок виходить менше 7, то буде працювати звичайна навігація.

[[! PdoPage? & Tpl = `@ INLINE <p> [[+ idx]] <a href="/[[+uri]]"> [[+ pagetitle]] </a> </ p>` & parents = `0` & pageLimit = `7`]] [[! + page.nav]]

Активуємо кеш на 30 хвилин:

[[! PdoPage? & Tpl = `@ INLINE <p> [[+ idx]] <a href="/[[+uri]]"> [[+ pagetitle]] </a> </ p>` & parents = `0` & pageLimit = `7` & cache =` 1` & cacheTime = `1800`]] [[! + page.nav]]

Вказуємо максимальний ліміт вибірки. Тепер, який би limit не вказав користувач в url - все одно буде не більше 10 результати пошуку.