Показать еще / ajax подгрузка элементов

Задача:

Постраничная ajax навигация по кнопке «показать ещё»


Решение:
  1. Создать свой шаблон компонента постраничной навигации bitrix:system.pagenavigation
    <?if($arResult["NavPageCount"] > 1):?> <?if ($arResult["NavPageNomer"]+1 <= $arResult["nEndPage"]):?> <? $plus = $arResult["NavPageNomer"]+1; $url = $arResult["sUrlPathParams"] . "PAGEN_1=" . $plus ?> <div class="load_more" data-url="<?=$url?>"> Показать еще </div> <?else:?> <div class="load_more"> Загружено все </div> <?endif?> <?endif?>
  2. Скрипт в script.js
    $(document).ready(function(){ $(document).on('click', '.load_more', function(){ var targetContainer = $('.loadmore_wrap'), // Контейнер, в котором хранятся элементы
    url = $('.load_more').attr('data-url'); // URL, из которого будем брать элементы if (url !== undefined) { $.ajax({ type: 'GET', url: url, dataType: 'html', success: function(data){ // Удаляем старую навигацию $('.load_more').remove(); var elements = $(data).find('.loadmore_item'), // Ищем элементы
    pagination = $(data).find('.load_more');// Ищем навигацию targetContainer.append(elements); // Добавляем посты в конец контейнера targetContainer.append(pagination); // добавляем навигацию следом } }) } }); });
  3. В шаблоне компонента списка новостей news.list до цикла задать класс обёртки loadmore_wrap
  4. В цикле присвоить класс элементу loadmore_item
  5. В настройках компонента выбрать вышесозданный шаблон постраничной навигации
Похожие решения:
Изменено: 26 05 2019
Просмотров: 365

Комментарии

Написать