[pdoTools] 1.9.6-rc Ajax пагинация в pdoPage

Предлагаю вам обновление pdoTools с одной очень интересной функцией — возможностью работы pdoPage через ajax.

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

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

То есть, по умолчанию достаточно просто включить &ajax и отправлять к странице GET запросы типа:

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

И в ответ вы получите JSON c результатами работы, пагинацией и служебными данными: номер страницы, сколько всего страниц и сколько всего результатов.

На этом сайте и на bezumkin.ru все страницы с пагинацией уже переведены на работу через ajax — можно тестировать, а под катом вас ждёт готовый код для внедрения у себя.

Написать универсальный javascript для всех сайтов с пагинацией не представляется возможным, хотя бы потому, что я не знаю, какие у вас там используются идентификаторы на странице. Так что показываю готовый код с комментариями, который вы легко сможете адаптировать для себя.

Первым делом оборачиваем вызов pdoPage в блоки с идентификаторами:

<div id="tickets-wrapper">
	<div id="tickets-rows">
		[[!pdoPage?
			&element=`getTickets`
			&parents=`0`
			&ajax=`1`
		]]
	</div>
	[[!+page.nav]]
</div>

Внутри [[+page.nav]] у нас div с классом pagination — так в pdoPage по умолчанию.

Теперь вешаем javascript на эту разметку:

// Работаем только при поддержке браузером History Api
if (window.history && history.pushState) {
	var JustLoaded = true;

	// Задаём функцию загрузки страницы
	function loadPage(href) {
		// Обёртка всего блока
		var parent = $('#tickets-wrapper');
		// Индикация загрузки контента
		parent.css({opacity: .3});
		// Если загружается первая страница, то у неё нет параметра ?page=1 -
		// нужно добавить самостоятельно, иначе pdoPage не отзовётся
		if (!href.match(/page=\d+/)) {
			href += href.match(/\?/)
				? '&page=1'
				: '?page=1';
		}
		// Запрос на сервер по указанной ссылке
		$.get(href, function(response) {
			// Дальше работаем только если пришел нормальный ответ
			if (response && response['total']) {
				// Вставляем контент и пагинацию в заранее подготовленные элементы
				parent.find('#tickets-rows').html(response['output']);
				parent.find('.pagination').html(response['pagination']);
				// Убираем индикацию загрузки
				parent.css({opacity: 1});
			}
		}, 'json');
	}

	// Вешаем обработчик ссылок в нашей разметке на кнопки пагинации
	$(document).on('click', '#tickets-wrapper .pagination a', function(e) {
		e.preventDefault();
		var href = $(this).prop('href');
		history.pushState({href: href}, '', href);
		loadPage(href);
		JustLoaded = false;
	});

	// Вешаем обработчик на переключение кнопок браузера взад-вперёд
	$(window).on('popstate', function(e) {
		if (!JustLoaded && e.originalEvent.state && e.originalEvent.state['href']) {
			loadPage(e.originalEvent.state['href']);
		}
		JustLoaded = false;
	});

	// При первой загрузке страницы помещаем в историю текущий адрес
	history.replaceState({href: window.location.href}, '');
}

Выглядит страшно, но если убрать все комментарии, то останется одна небольшая функция и 2 обработчика событий.

В итоге, вы получаете нормальную ajax навигацию в современных браузерах, с сохранением параметров в url, и обычную загрузку страниц поисковиками и древним IE6.

Вот еще пара наворотов, которые можно добавить после

parent.css({opacity: 1});

1. Прокрутка контента страницы вверх:

$('html, body').animate({
	scrollTop: parent.position().top + 50 || 0
}, 0);

К parent.position().top можно прибавить несколько пикселей для более точного позиционирования. На стандартной верстке Bootstrap3 нужно плюсовать высоту навигационной панели — 50px.

2. Если вы используете мой сниппет Title, то неплохо бы эмулировать его работу и при ajax навигации.

var delimeter = ' / ';
var title = [];
var tmp = $('title').text().split(delimeter);
for (var i = 0; i < tmp.length; i++) {
	if (i === tmp.length - 1 && response.page && response.page > 1) {
		title.push('стр. ' + response.page + ' из ' + response.pages);
	}
	if (!tmp[i].match(/^стр\./)) {
		title.push(tmp[i]);
	}
}
$('title').text(title.join(delimeter));

Всем успешных ajax навигаций!

[[!pdoPage?
		                &element=`pdoResources`
		                &showHidden=`1`
		                &limit=`6`
		                &pageLimit=`5`
			            &parents=`3`
			            &cache=`1`
                        &cacheTime=`2600000`
			            &cache_user=`1`
			            &pageNavVar=`nav-page`
			            &ajax=`1`
			            &tpl=`ListPortTpl`
			            &includeTVs=`port-teg, image-small, image-big`
		            ]]

<div id="pdopage">
    <div class="rows">
</div>
    [[!+page.nav]]
</div>

$(function(){
var $gallery = $('.rows a').simpleLightbox();

$gallery.on('show.simplelightbox', function(){
console.log('Requested for showing');
})
.on('shown.simplelightbox', function(){
console.log('Shown');
})
.on('close.simplelightbox', function(){
console.log('Requested for closing');
})
.on('closed.simplelightbox', function(){
console.log('Closed');
})
.on('change.simplelightbox', function(){
console.log('Requested for change');
})
.on('next.simplelightbox', function(){
console.log('Requested for next');
})
.on('prev.simplelightbox', function(){
console.log('Requested for prev');
})
.on('nextImageLoaded.simplelightbox', function(){
console.log('Next image loaded');
})
.on('prevImageLoaded.simplelightbox', function(){
console.log('Prev image loaded');
})
.on('changed.simplelightbox', function(){
console.log('Image changed');
})
.on('nextDone.simplelightbox', function(){
console.log('Image changed to next');
})
.on('prevDone.simplelightbox', function(){
console.log('Image changed to prev');
})
.on('error.simplelightbox', function(e){
console.log('No image found, go to the next/prev');
console.log(e);
});
});
$(document).ajaxStop(function() {

var $gallery = $('.rows a').simpleLightbox();

});