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

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

Для вывода новостей используем комплексный компонент 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-строки в браузере и замену на время подгрузки данных текста на кнопке "Еще" на троеточие и возврат значения после обработки.

Количество показов: 17067
05.10.2015


Реклама: ООО 'РЕГ.РУ Домены Хостинг'. ИНН 6312068502. ERID: CQH36pWzJqCRJ4UXaHSnYxUB4bq5fyuvNiq5y4geRNH7vF
Реклама: ООО "Таймвеб". ИНН 7840339881. ERID: CQH36pWzJqCRJ4UXUsMHpqiAFXGXsNMKwFXHih2J7kSZMP

Разработка сайта

Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...

Сопровождение сайта

Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение

Работы по сайту

Вы можете подать заявку на выполнение определенного объема работ по сайту. Опишите в заявке объем работ. Это может быть разработка какого-то нового функционала, доработки по имеющемуся функционалу, доработки под требования сео-специалистов. На основании заявки вам будет сформирован бюджет работ, а также названы сроки на выполнение тех или иных работ.