Pagination, load more and infinite scrolling

Identify the loading pattern

  • Numbered pages, Next or arrow controls: use a Pagination selector. When both numbered links and a Next or arrow control are available, prefer the Next or arrow control where possible because it is generally more stable.
  • A Load more button: use a Pagination selector.
  • Items loaded by scrolling: enable scrolling on the Element selector.

Numbered pagination

  1. Create a Pagination selector and select the pagination controls used to navigate between pages.
  2. Use the automatic pagination type. Adjust the pagination type only if the default option does not execute correctly.
  3. Place the listing wrapper and field selectors beneath the Pagination selector.
  4. Preview more than one discovered page.

load more buttons

  1. Create a Pagination selector and select the “Load more” control used to load additional records.
  2. Use the automatic pagination type. Adjust the pagination type only if the default option does not execute correctly.
  3. Confirm that each click adds new records.
  4. Confirm that execution stops when the control disappears, or no new records are added.

Infinite scrolling

  1. Create an Element selector for the repeated records.
  2. Enable scrolling.
  3. Set an element limit when only a specific number of records are required.
  4. Preview the result and run a limited job to confirm that later records are loaded.

Pages that use both pagination and scrolling

If each paginated page also requires scrolling to render all records, make the scrolling Element selector a child of the Pagination selector. This ensures the Pagination selector traverses the pages and the scrolling behavior executes again on every page it discovers.

_root
└── pagination
    └── items (Element, scrolling enabled)
        ├── name
        └── price

Related