MODX Evolution: Ditto AJAX Pagination

Сделать постраничную навигацию на AJAX для сниппета Ditto в CMS / CMF MODX Evolution оказывается можно очень просто.

К примеру, если ваш вызов Ditto с параметрами выглядит наподобие этого:

<div id="ajax-container">
  <div id="articles">
  [[Ditto? 
    &paginateAlwaysShowLinks=`1` 
    &tpl=`subpost` 
    &dateSource=`editedon` 
    &dateFormat=`%d.%m.%Y` 
    &paginate=`1` 
    &display=`4` 
    &parents=`3`
    &hideFolders=`1`]] 
    [+previous+] [+pages+] [+next+]
  </div><!--/#ajax-container-->
</div><!--/#articles-->

То скрипт на JavaScript будет вот таким:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
  $('a.ditto_page,a.ditto_next_link,a.ditto_previous_link').live('click', function() {
    var url = $(this).attr('href');
    $('#ajax-container').load(url + ' #articles');
    return false;
  });
});
</script>

Ниже оставлю вам несколько пояснений к используемым селекторам JQuery:

  • a.dittopage — ссылки-номера страниц;
  • a.ditto_next_link — ссылка на следующую по списку страницу;
  • a.ditto_previous_link — ссылка на предыдущую по списку страницу.

В настройках ресурсов, где будет такой динамичный контент не забывайте убирать флажки «кэшируемый».

Суть здесь в том, что я на JS переопределяю обработку клика посетителя по ссылке пагинации, заменяя переходы на новые page подгрузкой контента с помощью метода load().

Опубликовано 17-02-2014 в 14:09


Комментариев к записи: 2

  1. Стас:

    У меня вся страница пихается в #ajax-container

  2. Олег:

    Добрый день!
    Да пагинация в таком ключе действительно работает. Но у меня вопрос как сделать такую же пагинацию если я вызываю дитто через API?
    Вот вызов:
    $pop_tovary = $modx->runSnippet(‘Ditto’,
    array(
    ‘parents’ => $id_cat,
    ‘tpl’ => ‘tovary-tpl’,
    ‘orderBy’ => ‘pagetitle ASC’,
    ‘hideFolders’ => ’1′,
    ‘display’ => $disp,
    ‘paginate’ => ’1′,
    ‘paginateAlwaysShowLinks’ => ’1′,
    ‘depth’ => ’2′,
    ‘filter’ => $date_filter
    )
    );
    $pop_tovary = str_replace(‘[!', '[[', $pop_tovary);
    $pop_tovary = str_replace('!]‘, ‘]]’, $pop_tovary);
    $pop_tovary = $modx->parseDocumentSource($pop_tovary);
    $pop_tovary = $modx->evalSnippets($pop_tovary);
    echo $pop_tovary . ‘ [+previous+] [+pages+] [+next+] ‘;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты