Pagination & Infinite Scroll

Load data in pages by passing start and count options to items().

Key dcupl Functions

Function Purpose
query.items({ start, count }) Get a slice of items
query.count() Get total count (for calculating pages)

Basic Pagination

Pass start and count to items() to load a specific page:

// Page 1: items 0-19
const page1 = productList.catalog.query.items({ start: 0, count: 20 });

// Page 2: items 20-39
const page2 = productList.catalog.query.items({ start: 20, count: 20 });

// Page 3: items 40-59
const page3 = productList.catalog.query.items({ start: 40, count: 20 });

Calculate Total Pages

Use count() to determine how many pages exist:

const PAGE_SIZE = 20;
const totalItems = productList.catalog.query.count();
const totalPages = Math.ceil(totalItems / PAGE_SIZE);

Load More (Infinite Scroll)

Accumulate items as user scrolls:

const PAGE_SIZE = 20;
let currentPage = 0;
let allItems = [];

function loadMore() {
  const start = currentPage * PAGE_SIZE;
  const newItems = productList.catalog.query.items({ start, count: PAGE_SIZE });

  allItems = [...allItems, ...newItems];
  currentPage++;

  // Check if more items exist
  const hasMore = newItems.length === PAGE_SIZE;
  return hasMore;
}

Pagination with Sorting

Combine pagination with sort options:

const sortedPage = productList.catalog.query.items({
  start: 0,
  count: 20,
  sort: {
    attributes: ['price'],
    order: ['asc']
  }
});

Reset Pagination After Filter

When filters change, reset to first page:

// Apply new filter
productList.catalog.query.setCondition({
  attribute: 'category',
  operator: 'eq',
  value: 'Electronics'
});

// Get filtered first page
const results = productList.catalog.query.items({ start: 0, count: 20 });

Complete Flow

const PAGE_SIZE = 20;

// 1. Get total count for pagination info
const total = productList.catalog.query.count();
const totalPages = Math.ceil(total / PAGE_SIZE);

// 2. Load first page
let items = productList.catalog.query.items({ start: 0, count: PAGE_SIZE });

// 3. User requests next page
function goToPage(pageNumber: number) {
  const start = pageNumber * PAGE_SIZE;
  return productList.catalog.query.items({ start, count: PAGE_SIZE });
}

// 4. For infinite scroll, append instead of replace
function loadNextPage(currentPage: number, existingItems: any[]) {
  const start = currentPage * PAGE_SIZE;
  const newItems = productList.catalog.query.items({ start, count: PAGE_SIZE });
  return [...existingItems, ...newItems];
}