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