How to split a long list into pages

In TeleportHQ, you split a long list into pages with the Paginated setting. Select an Array Mapper (or a Table or CMS List) that is bound to data, tick Paginated, and set Items/page, for example 12. You can show Previous / Next buttons or Numbered pages, load more items as visitors scroll, or add a Load more button.

Before you start#

• The list must be bound to a data source or a headless CMS. See How to show a list of items (List / Array Mapper).

Steps#

1. On the canvas, select the Array Mapper, for example your product list. The right panel shows Array Mapper Settings.
2. Tick Paginated. TeleportHQ adds page controls under the list, sets Items/page to 10 and clears Start and End.
3. In Items/page, type how many items each page shows, for example 12.
4. In Pagination type, choose Previous / Next (the default) or Numbered pages.

In a TeleportHQ store, the shop's Products List comes paginated, with 20 items per page and Numbered pages: select it to change the same settings.

Load more items as visitors scroll, or with a button#

Instead of page buttons, a TeleportHQ paginated Array Mapper can load the next items on the same page:

• Infinite scroll: loads the next items as the visitor scrolls, and hides the page buttons. Pagination type disappears while it's ticked.
• Load more button: shows once Infinite scroll is ticked. It adds a Load more button that visitors click to load the next items. The button is a normal element you can restyle.

While designing with infinite scroll, use the Load more button on the canvas to preview more items. On your published site, the items already shown stay on screen while the next ones load.

Preview another page in the editor#

The Preview Page field changes which page the canvas shows, for example 2. It only affects the editor: "When the pagination is enabled you cannot manually set a specific page. This input is now used only for previewing."

Check that it worked#

The canvas shows the number of items you set, with page buttons or a Load more button below. Publish your site to try the page buttons as a visitor.

Style the pagination buttons#

The pagination controls in TeleportHQ are normal elements. Select them on the canvas or in the layers tree, then change their colors, spacing and text in the right panel like any other button. If you untick Paginated, the controls hide but keep their styling, so ticking it again brings them back as they were.

Paginate a Table or a CMS List#

• Table element: select the table, tick Paginated, set Items/page. The same Pagination type, Infinite scroll and Load more button settings follow. See How to show data in a table.
• CMS List: select it, tick Paginated, set Items/page. The CMS List also has Pagination query, which decides which page number the list shows. CMS Lists that share the same Pagination query show the same page, so give each one on a page its own value. Pagination isn't available for CMS single types ("Pagination, filtering and sorting are disabled for single types").

Troubleshooting#

I can't find the Paginated option The list isn't bound to a data source. Bind the Array Mapper's Source to a table first. Start and End show instead when a list isn't paginated.

My Start and End values are gone Ticking Paginated clears them: a paginated list always starts at its first item. Untick Paginated and type them again if you need a fixed slice of the list.

Changing Preview Page doesn't change my live site That's expected: Preview Page is for the editor only. Visitors use the page buttons.

Good to know#

• Items/page left empty counts as 10, in the editor and on the published site.
• Every row shows exactly once. On the published site, a paged list from the TeleportHQ database or PostgreSQL ends its order with each row's own key. Rows that share a value in the sort column, such as products with the same price or articles with the same date, no longer show on two pages or go missing.
• Pagination works together with search, sorting and filters: visitors page through the filtered results.