Modx REVO: pdoPage - замена getPage - постраничная навигация

Спонсор блога Магазин детской одежды Dress

Сниппет pdoPage позволяет вывести результаты работы других сниппетов с разбивкой на страницы.

Есть несколько серьезных отличий от сниппета getPage:

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

Параметры

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

Название	По умолчанию	Описание
&plPrefix		Префикс для выставляемых плейсхолдеров
&limit	10	Ограничение количества результатов на странице. Число должно быть больше 0, иначе вам не нужен этот сниппет.
&maxLimit	100	Максимально возможный лимит выборки. Перекрывает лимит, указанный пользователем через url.
&offset	0	Пропуск результатов от начала.
&page	1	Номер страницы для вывода. Перекрывается номером, указанным пользователем через url.
&pageVarKey	page	Имя переменной для поиска номера страницы в url.
&totalVar	page.total	Имя плейсхолдера для сохранения общего количества результатов.
&pageLimit	5	Количество ссылок на страницы. Если больше или равно 7 - включается продвинутый режим отображения.
&element	pdoResources	Имя сниппета для запуска.
&pageNavVar	page.nav	Имя плейсхолдера для вывода пагинации.
&pageCountVar	pageCount	Имя плейсхолдера для вывода количества страниц.
&tplPage		Чанк оформления обычной ссылки на страницу.
&tplPageWrapper		Чанк оформления всего блока пагинации, содержит плейсхолдеры страниц.
&tplPageActive		Чанк оформления ссылки на текущую страницу.
&tplPageFirst		Чанк оформления ссылки на первую страницу.
&tplPageLast		Чанк оформления ссылки на последнюю страницу.
&tplPagePrev		Чанк оформления ссылки на предыдущую страницу.
&tplPageNext		Чанк оформления ссылки на следующую страницу.
&tplPageSkip		Чанк оформления пропущенных страниц при продвинутом режиме отображения (&pageLimit >= 7).
&tplPageFirstEmpty		Чанк, выводящийся при отсутствии ссылки на первую страницу.
&tplPageLastEmpty		Чанк, выводящийся при отсутствии ссылки на последнюю страницу.
&tplPagePrevEmpty		Чанк, выводящийся при отсутствии ссылки на предыдущую страницу.
&tplPageNextEmpty		Чанк, выводящийся при отсутствии ссылки на следующую страницу.
&cache	0	Кэширование результатов работы сниппета.
&cacheTime	3600	Время актуальности кэша, в секундах.
&cache_user		Принудительно устанавливает ID посетителя, по-умолчанию кеширование производится с учетом ID посетителя
&toPlaceholder		Если не пусто, сниппет сохранит все данные в плейсхолдер с этим именем, вместо вывода не экран.
&ajax	0	Включение поддержки асинхронных запросов к сниппету. См. ниже.
&ajaxMode	default	Включение встроенной ajax пагинации. См. ниже

Поддержка Ajax

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

Запрос сделан при помощи XMLHttpRequest, то есть — ajax.
В запросе содержится переменная, указанная у сниппета в &pageVarKey. По умолчанию, это page.
У сниппета включен параметр &ajax=`1`.

То есть, вам достаточно просто указать сниппету &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>

Этот тип пагинации добавлен как эксперементальный и его не стоит использовать на рабочем сайте.

Функции обратного вызова

Вы можете указать функции, которые будут вызываться до и после загрузки страницы через 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 на одной странице.

Примеры

Так как 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 результатов на странице.

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

Modx REVO

понедельник, 26 октября 2015 г.

pdoPage - замена getPage - постраничная навигация

Параметры

Поддержка Ajax

Встроенная Ajax пагинация

Загрузка кнопкой

Загрузка при прокрутке

Функции обратного вызова

Примеры

Комментариев нет:

Отправить комментарий

понедельник, 26 октября 2015 г.

pdoPage - замена getPage - постраничная навигация

Параметры

Поддержка Ajax

Встроенная Ajax пагинация

Загрузка кнопкой

Загрузка при прокрутке

Функции обратного вызова

Примеры

Комментариев нет:

Отправить комментарий

понедельник, 26 октября 2015 г.