Ajax подгрузка страниц + js пагинация, (*1)
, (*2)
Installation
The preferred way to install this extension is through composer., (*3)
Either run, (*4)
php composer.phar require --prefer-dist skeeks/yii2-ajax-pager "*"
or add, (*5)
"skeeks/skeeks/yii2-ajax-pager": "*"
Examples
http://www.v3toys.ru/detskij-transport/ehlektromobili/, (*6)
echo \yii\widgets\ListView::widget([
//...
'pager' => [
'id' => 'sx_v3toys_paginator',
'class' => \skeeks\yii2\ajaxpager\AjaxLinkPager::class,
'noneLeftText' => '',
'item' => '.catalog-list__item',
'container' => '.catalog-list',
'paginationSelector' => '.catalog-list .pagination',
'triggerTemplate' => '
',
'triggerText' => 'Показать еще',
'spClientOptions' => [
'listStyle' => 'paging-list',
'prevText' => '',
'nextText' => '',
'edges' => '1',
],
'spClientMobileOptions' => [
'listStyle' => 'paging-list',
'prevText' => '',
'nextText' => '',
'displayedPages' => '1',
],
'eventOnPageChange' => new \yii\web\JsExpression(<<<JS
function(pageNum, scrollOffset, url) {
sx.App.jLastProduct = jQuery(".catalog-list__item:last");
var getCurrentPage = jQuery('#sx_v3toys_paginator').pagination('getCurrentPage');
var result = getCurrentPage + 1;
jQuery('#sx_v3toys_paginator').pagination('drawPage', result);
}
JS
),
'eventOnRendered' => new \yii\web\JsExpression(<<<JS
function(pageNum, scrollOffset, url) {
sx.App.ImageLazyLoader.update();
sx.App.ImageProductSlider.update();
jQuery('.catalog-list__link-not-ready span').ellipsis({
lines: 2, // force ellipsis after a certain number of lines. Default is 'auto'
ellipClass: 'ellip', // class used for ellipsis wrapper and to namespace ellip line
responsive: true // set to true if you want ellipsis to update on window resize. Default is false
});
jQuery(".catalog-list__link-not-ready").removeClass('catalog-list__link-not-ready');
var getPagesCount = jQuery('#sx_v3toys_paginator').pagination('getPagesCount');
var getCurrentPage = jQuery('#sx_v3toys_paginator').pagination('getCurrentPage');
sx.App.jLastProduct.after('<li class="main-catalog__sepatrator"><span>Страница ' + getCurrentPage + ' из ' + getPagesCount + '</span></li>');
}
JS
),
],
//...
]); ?>
Links
SkeekS CMS (Yii2) — fast, simple, effective!
skeeks.com | cms.skeeks.com, (*7)