-
Notifications
You must be signed in to change notification settings - Fork 95
Реализация кнопки ПОКАЗАТЬ ЕЩЁ вместо пагинации
ramax495 edited this page Jan 27, 2019
·
6 revisions
Общий принцип сводится к следующему: при клике на "Показать ещё" мы посылаем на сервер запрос с параметрами такими же, как и обычная AJAX пагинация у компонента. Результат запроса мы не заменяем на существующий блок, а добавляем в него.
- В вызове компонента прописываем
AJAX_MODE => Y
. При этом битрикс обрамляет блок компонента в div с айди компонента - В шаблоне компонента генерируем такой же айди:
$bxajaxid = CAjax::GetComponentID($component->__name, $component->__template->__name, $component->arParams['AJAX_OPTION_ADDITIONAL']);
- В шаблоне отрисовываем кнопку "Показать ещё". Передаем в неё необходимые параметры:
<?if($arResult["NAV_RESULT"]->nEndPage > 1 && $arResult["NAV_RESULT"]->NavPageNomer<$arResult["NAV_RESULT"]->nEndPage):?>
<div id="btn_<?=$bxajaxid?>">
<a data-ajax-id="<?=$bxajaxid?>" href="javascript:void(0)" data-show-more="<?=$arResult["NAV_RESULT"]->NavNum?>" data-next-page="<?=($arResult["NAV_RESULT"]->NavPageNomer + 1)?>" data-max-page="<?=$arResult["NAV_RESULT"]->nEndPage?>">Показать еще комментарии</a>
</div>
<?endif?>
- Обрабатываем клик по кнопке, при этом сама кнопка удаляется:
$(document).on('click', '[data-show-more]', function(){
var btn = $(this);
var page = btn.attr('data-next-page');
var id = btn.attr('data-show-more');
var bx_ajax_id = btn.attr('data-ajax-id');
var block_id = "#comp_"+bx_ajax_id;
var data = {
bxajaxid:bx_ajax_id
};
data['PAGEN_'+id] = page;
$.ajax({
type: "GET",
url: window.location.href,
data: data,
timeout: 3000,
success: function(data) {
$("#btn_"+bx_ajax_id).remove();
$(block_id).append(data);
}
});
});
- В шаблоне прячем некоторые элементы, которые не нужны в ответе на запрос "Показать ещё":
<?if(!$_GET["bxajaxid"]):?>
{{something}}
<?endif?>
Welcome to the bitrix.exam2 wiki! Битрикс, подготовка к экзамену 2 https://github.com/donitz1609/bitrix.exam2