📚 pbPagination Class: AJAX Pagination, Filtering & Sorting Controller

📝 Description

pbPagination is a universal JavaScript class for managing dynamic content collections on web pages.

It implements:
✅ Pagination (standard, "Load More", infinite scroll)
✅ Multi-field filtering (selects, checkboxes, ranges)
✅ Sortable tables/lists with active state tracking
✅ URL updates without full page reloads

Ideal for product catalogs, news feeds, blogs, or any list requiring AJAX loading.

🗂 Core Features

• AJAX content loading with DOM insertion
• Multiple pagination modes
• Combined filtering across fields
• Sort preservation
• History API integration

⚙️ Automatic Initialization

Enabled when:

1. System setting pageblocks_load_scripts is ON
2. Snippet call includes showPagination = 1

PHP Example:

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

Creates global window.pbPagination instance with public methods:
loadPage(), next(), prev(), sort(), filter()

⚙️ Manual Setup

1. Include required scripts:

<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. Initialize instance:

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

🧩 Public Methods

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

Loads specific page with DOM updates.

pbPagination.loadPage(2, 'beforeend');

2️⃣ next(swap = 'innerHTML')

Loads next page.

pbPagination.next('beforeend');

3️⃣ prev()

Loads previous page.

pbPagination.prev();

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

Applies sorting:

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

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

Applies filters:

// Single filter
pbPagination.filter('category', 'books');

// Range filter  
pbPagination.filter('price', '100-500');

// Form-based filters
pbPagination.filter();

🔗 AJAX Endpoints

Automatically handles requests to:

• /pageblocks/pagination/items (content HTML)
• /pageblocks/pagination/links (pagination HTML)
• /pageblocks/pagination/total (item counts)

✅ Key Benefits

🚀 No page reloads
🔍 SEO-friendly URLs
⚙️ Flexible configuration
🔧 Easy to extend

🏁 Conclusion

pbPagination provides turnkey solutions for dynamic content management with clean integration and comprehensive control methods.