Используя данное решение, можно избавиться от необходимости загружать из базы данных сразу весь контент, что значительно увеличит скорость загрузки всей страницы и уменьшит нагрузку на сервер баз данных.
И так, преступим непосредственно к реализации. Для начала на нужно кастомизировать шаблон компонента system.pagenavigation, он должен выглядеть примерно следующим образом:
<?if(!defined("B_PROLOG_INCLUDED")|| B_PROLOG_INCLUDED!==true)die(); $this->setFrameMode(true);
if(!$arResult["NavShowAlways"]){
if($arResult["NavRecordCount"] ==0 || ($arResult["NavPageCount"] == 1 && $arResult["NavShowAll"] ==false))
return;}?>
<div class="bottom_pager_ajax" style="clear:both;width:100%; height:1px;"> </div>
<script type="text/javascript">
//записываем количество страниц
var count = <?=$arResult["NavPageCount"];?>
//первый запрос происходит для второй страницы
var begin = 2;
var endScroll = false;
//определяем положение нашего пагинатора на странице
var getApprovalLoanPos = $('.bottom_pager_ajax').offset().top;
$function(){
//если есть еще элементы, которые мы не вывели,
//то при скролле до пагинатора показываем следующию порцию элементов
$(window).scroll(function(){
var bodyScroll = $(window).scrollTop() + $(window).height();
var scrollResult1 = getApprovalLoanPos - bodyScroll;
if(scrollResult1 < 50 && !endScroll && begin <= count){
endScroll = true;
loader();
}
})
});
//функция отправки ajax запроса
function loader(){
//показываем стандартный прелоадер битрикса
BX.showWait();
$.ajax({
url: "<?=$APPLICATION->GetCurPage();?>?PAGEN_1=" + begin,
type: "POST",
data: ({
resize: 'Y'
}),
success: function(data){
BX.closeWait();//скрываем стандартный прелоадер битрикса
$(".more_ajax").append(data);//добавляем эелементы на страницу
begin++;//переопределяем счетчик
getApprovalLoanPos = $('.bottom_pager_ajax').offset().top;
endScroll = false;
},
fail: function(){
//если ajax запрос не прошел, тогда просто
//скрываем стандартный прелоадер битрикса
BX.closeWait();
}});
}
</script>
Затем на нужно кастомизировать шаблон вывода наших элементов (шаблон компонента news.list, section.list и т.д. у кого что использовалось):
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$this->setFrameMode(true);?>
<ul class="more_ajax">
<?//если запрос ajax, то очищаем буфер
if(IS_AJAX && $_REQUEST['resize'] == "Y")
$APPLICATION->RestartBuffer();?>
<?foreach ($arResult['ITEMS'] as $key => $arItem):
$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], $strElementEdit);
$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], $strElementDelete, $arElementDeleteParams);?>
<li>
<!-- Тут вывод описания вашего элемента -->
</li>
<?endforeach;?>
<?//если запрос ajax, то очищаем буфер
if(IS_AJAX && $_REQUEST['resize'] == "Y")die();?>
</ul>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
<?=$arResult["NAV_STRING"]?>
<?endif;?>