Механизм "Показать еще" в списке элементов

Достаточно давно уже стало популярным вместо стандартной пагинации в выводе списков элементов информационного блока (буть то новости, статьи, каталог товаров ...) использования механизма "Показать еще". Данный пост о моей реализации такого механизма.

Итак, рассмотрим механизм на примере раздела новостей.

Для вывода новостей используем комплексный компонент bitrix:news. Список элементов инфоблока в данном комплексном компоненте подключается в файле news.php. Перед подключением компонента bitrix:news.list прописываем:

<div id="pagination-container">
        <? if (isset($_REQUEST['ajax_get_page']) && ($_REQUEST['ajax_get_page'] == 'y')) {
            $APPLICATION->RestartBuffer();
        }?>
        <?$APPLICATION->IncludeComponent(
            "bitrix:news.list",
            "",
            Array(...),
        $component
    ); ?>
    <?if (isset($_REQUEST['ajax_get_page']) && ($_REQUEST['ajax_get_page'] == 'y')) {
            die();
        }?>
    </div>
    ?>

В итоге, подключение списка новостей обернули в див-контейнер и реализовали обнуление буфера до и после списка новостей.

Далее необходимо внести корректировки в сам шаблон списка новостей:

У меня список новостей выводится с помощью ul li к контейнеру новостей(ul) прописываем класс pagination-items, в который в дальнейшем будем подгружать данные. Добавляем данные по пагинации:

<? $leftItems = $arResult['NAV_RESULT']->NavRecordCount - ($arResult['NAV_RESULT']->NavPageNomer * $arResult['NAV_RESULT']->NavPageSize);
    if ($leftItems > $arResult['NAV_RESULT']->NavPageSize) $leftItems = $arResult['NAV_RESULT']->NavPageSize; ?>
    <div class="pages-container">
        <? if ($leftItems > 0): ?>
            <a href="javascript:void(0)" class="more_goods">еще <?= $leftItems ?></a>
        <? endif; ?>
        <? if ($arParams["DISPLAY_BOTTOM_PAGER"]): ?><br/><?= $arResult["NAV_STRING"] ?><? endif; ?>
    </div>

Таким образом, имеем проверку, есть ли что показать в блок "Показать еще", если есть - показываем данный блок, а также выводим стандартную пагинацию.

Дальше, необходимо разработать js-скрипт подгрузки данных:

$(document).ready(function(){
    var PagenationContainer = $('#pagination-container');
    PagenationContainer.on('click','a.more_goods', function () {
        var ajaxurl = PagenationContainer.find('ul.pagination li.next a').attr('href');
        if(ajaxurl!==undefined){
            $.ajax({
                type: "POST",
                url: ajaxurl,
                data: {'ajax_get_page': 'y'},
                dataType: "html",
                success: function (data) {
                    var AppendLi = $(data).find('.pagination-items').find('li');
                    var Pagination = $(data).find('.pages-container').html();
                    PagenationContainer.find('.pagination-items').append(AppendLi);
                    PagenationContainer.find('.pages-container').html(Pagination);
                }
            });
        }
        return false;
    });
});

Страницу, которую нужно грузить по нажатию на кнопку "Показать еще" берем из ссылки следующей страницы стандартной пагинации. Я брал типовой компонент round и его немного модифицировал. В типовом имя класса(li.next), на сколько я помню, отличается, смотрите у себя.

В итоге, при нажатии на кнопку "Показать еще", к общему списку подтягиваем дополнительный блок данных, обновляем кнопку "Показать еще" вместе с пагинацией.

Updated 2016-01-27. Немного переработал механизм - сделал более универсальным

В шаблон со списком элементов, нужно внести правки:

Cписок элементов (именно foreach, без подключения пагинации), оборачиваем в контейнер с классом pagination-items, а каждый из элементов должен лежать в контейнере с классом paginator-item. Тогда JS для обработки данных примет вид:

$(document).ready(function(){
var PagenationContainer = $('#pagination-container');
    PagenationContainer.on('click','a.more_goods', function () {
        var ajaxurl = PagenationContainer.find('div.bx-pagination  ul li.bx-pag-next a').attr('href');
        var thatTxt = $(this).html();
        var that = this;
        $(this).html('...');
        if(ajaxurl!==undefined){
            $.ajax({
                type: "POST",
                url: ajaxurl,
                data: {'ajax_get_page': 'y'},
                dataType: "html",
                success: function (data) {
                    var AppendLi = $(data).find('.pagination-items .paginator-item');
                    var Pagination = $(data).filter('.pagination_wrap').html();
                    PagenationContainer.find('.pagination-items').append(AppendLi);
                    PagenationContainer.find('.pagination_wrap').html(Pagination);
                    history.pushState('', '', ajaxurl);
                    $(that).html(thatTxt);
                }
            });
        }
        return false;
    });
});

Данная вариация скрипта написана под дефолтный шаблон пагаинации "round".

В скрипт добавил обновление url-строки в браузере и замену на время подгрузки данных текста на кнопке "Еще" на троеточие и возврат значения после обработки.