📚 Класс pbPagination: контроллер AJAX-пагинации, фильтрации и сортировки

📝 Описание

pbPagination — это универсальный JavaScript-класс для управления динамическими коллекциями контента на веб-страницах.

Он реализует:
✅ Пагинацию (обычную, «Показать ещё», бесконечную прокрутку)
✅ Многофакторную фильтрацию (селекты, чекбоксы, диапазоны)
✅ Сортировку списков/таблиц с сохранением активного состояния
✅ Обновление URL без полной перезагрузки страницы

Идеально подходит для каталогов товаров, лент новостей, блогов или любых списков с AJAX-подгрузкой.

🗂 Основные возможности

• Загрузка контента по AJAX с вставкой в DOM
• Поддержка разных режимов пагинации
• Комбинированная фильтрация по полям
• Сортировка с отслеживанием активного состояния
• Интеграция с History API

⚙️ Автоматическая инициализация

Работает, если:

1. Включена системная настройка pageblocks_load_scripts
2. В вызове сниппета указан параметр showPagination = 1

Пример на PHP:

if ($this->modx->getOption('pageblocks_load_scripts')) {
    $this->modx->regClientScript(
        "<script>
          document.addEventListener('DOMContentLoaded', function() {
            window.pbPagination = new pbPagination($snippetConfig);
          });
        </script>"
    );
}

Создаётся глобальный экземпляр window.pbPagination с публичными методами: loadPage(), next(), prev(), sort(), filter()

⚙️ Ручная инициализация

1. Подключить необходимые скрипты:

<script src="/assets/components/pageblocks/js/web/pb.fetch.v280.js"></script>
<script src="/assets/components/pageblocks/js/web/pb.message.v280.js"></script>
<script src="/assets/components/pageblocks/js/web/pb.pagination.v280.js"></script>

2. Инициализировать экземпляр вручную:

<script>
 document.addEventListener('DOMContentLoaded', () => {
   window.pbPagination = new pbPagination({
     page: 1,
     limit: 20,
     targetItems: '#blog-items',
     infiniteScroll: true,
     updateUrl: true
   });
 });
</script>

🧩 Публичные методы

1️⃣ loadPage(pageNumber, swap = 'innerHTML')

Загружает конкретную страницу с обновлением DOM.

pbPagination.loadPage(2, 'beforeend');

2️⃣ next(swap = 'innerHTML')

Загружает следующую страницу.

pbPagination.next('beforeend');

3️⃣ prev()

Загружает предыдущую страницу.

pbPagination.prev();

4️⃣ sort(sortby, sortdir = '')

Применяет сортировку:

pbPagination.sort('price', 'asc');

5️⃣ filter(name = '', value = '')

Применяет фильтры:

// Один фильтр
pbPagination.filter('category', 'books');

// Диапазон  
pbPagination.filter('price', '100-500');

// Все фильтры из формы
pbPagination.filter();

🔗 AJAX-эндпоинты

Запросы отправляются автоматически по адресам:

• /pageblocks/pagination/items (HTML списка)
• /pageblocks/pagination/links (HTML пагинации)
• /pageblocks/pagination/total (общее количество)

Все параметры (page, sortby, sortdir, фильтры) формируются автоматически.

✅ Ключевые преимущества

🚀 Без перезагрузки страницы 🔍 SEO-дружественные URL ⚙️ Гибкая настройка
🔧 Легко расширяется

🏁 Заключение

pbPagination — это готовое решение для динамического управления контентом с чистой интеграцией и набором удобных методов управления.