Показать еще / 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
Просмотров: 94