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

Постраничная ajax навигация по кнопке «показать ещё» для 1С-Битрикс

Пример для компонентов bitrix:news.list или bitrix:catalog.section

Решение:

Проверяем, чтобы был подключен jQuery
Создадим свой шаблон компонента постраничной навигации в #мой_шаблон#/components/bitrix/system.pagenavigation/load_more/

Создадим файл template.php и добавим следующий код:

<?if($arResult["NavPageCount"] > 1):?>
    <?if ($arResult["NavPageNomer"]+1 <= $arResult["nEndPage"]):?>
        <?
            $plus = $arResult["NavPageNomer"]+1;
            $url = $arResult["sUrlPathParams"] . "PAGEN_1=" . $plus
        ?>
        <div class="load_more" style="cursor:pointer;width:100%" data-url="<?=$url?>">
            Показать еще
        </div>
<?endif?>

Создадим файл 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); //  добавляем навигацию следом
                }
            })
        }
    });
});

В шаблоне компонента списка новостей news.list до цикла задать класс обёртки loadmore_wrap
В цикле присвоить класс элементу loadmore_item
В настройках компонента выбрать новый шаблон постраничной навигации load_more

В коде это будет выглядеть так:

"PAGER_BASE_LINK_ENABLE" => "N",
"PAGER_DESC_NUMBERING" => "N",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "N",
"PAGER_SHOW_ALWAYS" => "N",
"PAGER_TEMPLATE" => "load_more",
"PAGER_TITLE" => "Новости",

Не понятно? Нажми тут для помощи!