Одновременно разбивка по страницам(пагинация) и ajax подгрузка по кнопке "Загрузить еще" в PDO PAGE.

Добрый день! Подскажите пожалуйста возможно ли сделать одновременно пагинацию с разбивкой по страницам и кнопку для ajax загрузки ресурсов при помощи PDO PAGE из коробки?

Алексей

03 февраля 2023, 10:08

1 910

Комментарии: 9

Артур Шевченко

03 февраля 2023, 11:04

Прям из коробки нельзя, надо немного поправить JS. Вот это

if (config.history) {
                if (typeof(jQuery().sticky) == 'undefined') {
                    $.getScript(config['assetsUrl'] + 'js/lib/jquery.sticky.min.js', function () {
                        pdoPage.initialize(config);
                    });
                    return;
                }
                pdoPage.stickyPagination(config);
            }
            else {
                $(config.pagination).hide();
            }

Заменить на это

$(document).on('click', config['link'], function (e) {
                e.preventDefault();
                var href = $(this).prop('href');
                var key = config['pageVarKey'];
                var match = href.match(new RegExp(key + '=(\\d+)'));
                var page = !match ? 1 : match[1];

                if (pdoPage.keys[key] != page) {
                    $(config['more']).find('button').attr('disabled', false);
                    if (config.history) {
                        if (page == 1) {
                            pdoPage.Hash.remove(key);
                        } else {
                            pdoPage.Hash.add(key, page);
                        }
                    }
                    $this.loadPage(href, config);
                }
            });

            if (config.history) {
                if (typeof(jQuery().sticky) == 'undefined') {
                    $.getScript(config['assetsUrl'] + 'js/lib/jquery.sticky.min.js', function () {
                        pdoPage.initialize(config);
                    });
                    return;
                }
                pdoPage.stickyPagination(config);

                $(window).on('popstate', function (e) {
                    if (e.originalEvent.state && e.originalEvent.state['pdoPage']) {
                        $this.loadPage(e.originalEvent.state['pdoPage'], config);
                    }
                });

                history.replaceState({pdoPage: window.location.href}, '');
            }

И в pdoPage параметру ajaxMode установить значение button.

Алексей

03 февраля 2023, 12:17

Я правильно понял, что надо поменять этот код в файле assets/components/pdotools/js/pdopage.js? Поменял, но ничего не произошло, пагинации присваивается класс display:none; не могу понять где. Но даже если присвоить через css display: block !important; то работает не корректно, если пользуешься кнопкой, а потом пагинацией, то перебрасывает по такой ссылке site.ru/?page=1&pageId=17&hash=caba36b7635ec52390b81ac85612a759468b600c на несуществующую страницу.

Алексей

03 февраля 2023, 12:52

Выставил параметр ajaxHistory=1, сейчас пагинации не присваивается класс display: none, то есть отображается и кнопка и постраничная разбивка, но попрежнему работает не корректно

Алексей

03 февраля 2023, 12:53

<div id="pdopage" class="items-product">
								<div class="row rows row-flex">
									{'!pdoPage' | snippet : [
										'element'=>'msProducts',
										'parents'=>$modx->resource->id,
										'depth'=>10,
										'tpl' =>'product.tpl',
										'limit' =>4,
										'maxLimit'=>200,
										'pageLimit'=>10,
										'ajax'=>1,
										'ajaxHistory'=>1,
										'ajaxMode'=>'button',
										'tplPage' =>'@INLINE <a href="{$href}" class="but">{$pageNo}</a>',
										'tplPageActive'=>'@INLINE <a href="{$href}" class="but active">{$pageNo}</a>',
										'tplPageWrapper'=>'@INLINE <div class="pagination">{$pages}</div>',
										'tplPagePrev' =>'@INLINE <li class="control"><a href="{$href}"><</a></li>',
										'tplPageNext'=>'@INLINE <li class="control"><a href="{$href}">></a></li>',
										'tplPageSkip'=>'@INLINE <span>...</span',
										'tplPagePrevEmpty'=>'@INLINE <li class="disabled"><span><<</span></li>',
										'tplPageNextEmpty'=>'@INLINE <li class="disabled"><span>>></span></li>',
										'sortby'=>'{"menuindex":"DESC"}',
										'where'=>'{"template":"6"}'
									]}
								</div>
								<div class="pages">
									[[!+page.nav]]
								</div>
							</div>

Алексей

03 февраля 2023, 13:44

Добавил в вызов 'frontend_js'=>'[[+assetsUrl]]js/pdopage.js', все заработало. Единственное если кнопкой подгружаешь до последней страницы, то кнопка пропадает, а при возврате при помощи пагинации не появляется.

Артур Шевченко

03 февраля 2023, 16:30

Да, там ещё кое-что надо изменить. После

$.post(config['connectorUrl'], params, function (response) {

вставить

if(response.page != response.pages){
            $(config['more']).find('button').attr('disabled', false);
        }else{
            $(config['more']).find('button').attr('disabled', true);
        }

И закомментировать или удалить

if (config['mode'] == 'button') {
                    if (response['pages'] == response['page']) {
                        $(config['more']).hide();
                    }
                    else {
                        $(config['more']).show();
                    }
                }

Алексей

03 февраля 2023, 17:13

Спасибо большое за помощь, все работает.

Vladimir

03 августа 2023, 11:59

Повторил всё за вами, но кнопка не появилась, пагинация появилась но при клике перезагружает страницу.

&ajaxMode=`button`
&ajaxHistory=`1`
&frontend_js=`/assets/pdopage.js`

Правда запускается через mFilter2

Артур Шевченко

03 августа 2023, 17:40

У mFilter2 свой js для управления пагинацией

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Одновременно разбивка по страницам(пагинация) и ajax подгрузка по кнопке "Загрузить еще" в PDO PAGE.

Комментарии: 9

Здесь упомянуты