AjaxSnippet и аякс пагинация

Аякс пагинация на MODX Revo с помощью AjaxSnippet

AjaxSnippet - сниппет для MODX Revolution, который позволяет вам ускорить загрузку сайта за счет выноса не особо важных элементов в ajax запросы.

  • Вы вызываете AjaxSnippet на любой странице сайта, с указанием имени нужного сниппета и параметров.
  • Сниппет выдаёт в текущую страницу пустой блок с прелоадером и регистрирует ajax запрос.
  • После загрузки страницы этот запрос уходит на сервер и ответ помещается в приготовленный блок.
  • Можно отправлять запрос сразу после загрузки страницы, или при нажатии ссылки-триггера.

	[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&depth=`1`
&parents=`4`
&showLog=`0`
&page=`[[!geturi]]` 
&as_mode=`onload`   
&wrapper=`tpl.ajax`
]] 
<h2>второй вызов</h2>
[[!AjaxSnippet?
&snippet=`pdoPage`
&element=`msProducts`
&tpl=`tpl.msProducts.row`
&limit=`3`
&depth=`1`
&parents=`4`
&showLog=`0`
&sortdir=`DESC`
&page=`[[!geturi]]` 
&pageVarKey=`page2`
&as_mode=`onload`   
&wrapper=`tpl.ajax`
]]
	

Скрипт перехода по страничкам пагинации

	<script>
    $(document).on('as_complete', document, function(e,d) {
    $(".pagin."+d["key"]).append(d["pagination"]);
    $(document).on('click', '.'+d["key"]+' .pagination a', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    console.log(url);
    $.post(url, {as_action: d["key"]}, function(response) {
	    if (typeof response.output !== "undefined") {
		    $('.ajax-snippet#'+d["key"]).html(response.output);
		    $(".pagin."+d["key"]).html(response.pagination); 
    }
    }, "json");                  
    }); 
});
</script>
	

Сниппет  geturi

	$filter = $_GET['page'];
return $filter;
	

Обертка для вывода tpl.ajax

<div class="pagin [[+key]]"></div><br/>
<div id="[[+key]]" class="ajax-snippet">
<img src=" " class="as_spinner" style="width:32px;margin:auto;display:block;">
</div>
<div class="pagin [[+key]]"></div>

В итоге получаем независимую аякс пагинацию нескольких выводов. Используем для этого pdoPage, AjaxSnippet...


Комментарии