Bitrix. Ajax подгрузка элементов через «Показать еще»
Подгрузка элементов через кастомный компонент с параметрами «offset» и «pageSize». Не через пагинацию.
Создаем компонент. В component.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$pageSize = !empty((int)$arParams['pageSize']) ? (int)$arParams['pageSize'] : 8; $offset = !empty((int)$arParams['offset']) ? (int)$arParams['offset'] : 0; $res = CIBlockElement::GetList( ["ID" => "ASC"], ["IBLOCK_ID" => 1, "ACTIVE" => "Y"], false, [ "nTopCount" => $pageSize + 1, "nOffset" => $offset ], ["ID", "NAME"] ); $count = 0; while ($item = $res->GetNext()) { $count++; if ($count <= $pageSize) { $arResult['ITEMS'][] = $item; } } $arResult['HAS_MORE'] = ($count > $pageSize); |
Для чего мы добавляем в $pageSize плюс один. Чтобы понять, нужно ли нам показывать кнопку «Показать еще», мы запрашиваем на один элемент больше.
В шаблоне «…/templates/.default/template.php» выводим элементы:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="wrap_list_items"> <div class="list_items"> <?php foreach ($arResult['ITEMS'] as $item): ?> <div class="item"><?php echo $item['NAME']?></div> <?php endforeach; ?> </div> <?php if ($arResult['HAS_MORE']) : ?> <a class="link_more_cta" href="#" id="items_more_cta" data-offset="<?=((int)$arParams['offset']+(int)$arParams['pageSize']);?>" data-cnt="<?=(int)$arParams['pageSize']?>" data-url="/local/components/mycomp/news.list/ajax.php">Показать еще</a> <?php endif; ?> </div> |
В файле js «…/templates/.default/script.js»:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var load_more = false; $(document).on("click", "#items_more_cta", function(e) { e.preventDefault(); if (load_more) return false; load_more = true; $.ajax({ url: $(this).attr('data-url'), type: "POST", data: { offset: $(this).attr('data-offset'), pageSize: $(this).attr('data-cnt') }, success: function(data) { $('#items_more_cta').parent().remove(); $('.wrap_list_items').append(data); load_more = false; } }); }); |
В файле ajax.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php"); /** @global CMain $APPLICATION */ define("NO_KEEP_STATISTIC", true); define('PUBLIC_AJAX_MODE', true); define("NOT_CHECK_PERMISSIONS", true); use Bitrix\Main\Application, Bitrix\Main\Context; $request = Context::getCurrent()->getRequest(); $POST = $request->getPostList()->toArray(); //$APPLICATION->ShowAjaxHead(); $APPLICATION->IncludeComponent( "mycomp:news.list", "", [ "offset" => $POST['offset'], "pageSize" => $POST['pageSize'], ] ); |
Это пример. В коде есть ошибки. Например этот ajax скрипт добавит в класс «wrap_list_items» еще один «wrap_list_items». Возможно стоит добавить параметр и завернуть код в шаблоне в:
|
1 2 3 4 5 6 7 |
if ($arParams["IS_AJAX"] == "Y") { $APPLICATION->RestartBuffer(); } // код if ($arParams["IS_AJAX"] == "Y") { die(); } |
PS. А лучше всего использовать D7 и через «BX.ajax.runComponentAction»
