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>

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

  • Администратор: к записи Не знаю, с ходу не скажу. »
  • Андрей: к записи Сорри, лишнее TD »
  • Андрей: к записи У вас лишнее в 71 строке. За быстрый урок спасибо »
  • Михаил: к записи Здравствуйте. Спасибо помогло! А не скажите как не »
  • Олег: к записи Добрый день! Да пагинация в таком ключе действите »
  • Радик: к записи Помогите, не получается спарсить. Вот тут #ire »
  • Администратор: к записи Когда меняете пароль к базе в панели управления хо »

Статистика спама

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