Load more
Offset pagination for a list (or a global-search block): a button that appends the next page of results.
Shared setup - the script tag, list keys, templates, and data binding - is in the getting started guide.
Minimal setup
One attribute. Point a button (or link) at the list's key:
<button data-slater-load-more="blog">Load more</button>| Attribute | On | Value | Required |
|---|---|---|---|
data-slater-load-more | <button> / <a> | the list (or search block) key | yes - the feature is inert without it |
The list renders its page size on first load; each click appends the next page.
Optional attributes
On the list wrapper (or via window.SlaterSearchConfig):
| Attribute | Value | Default |
|---|---|---|
data-slater-page-size | integer - items on first load | 12 (lists), 20 (search blocks) |
data-slater-load-more-amount | integer - items added per click | the page size |
<div data-slater-list="blog"
data-slater-page-size="12"
data-slater-load-more-amount="12"> … </div>Config equivalents: lists.<key>.initialLimit / lists.<key>.loadMoreAmount (search.<key>.… for a search block). Attributes win, as everywhere.
Pairs well with data-slater-count to show "N results".
Behavior
- New items are appended (not re-rendered), so scroll position is kept.
- The button auto-hides once everything is shown, and comes back when a new search/filter has more pages.
- If a page fails to load, the internal counter rolls back, so the next click retries the same page instead of skipping one.
- On a global-search block it pages through the ranked window (top 1000) and stops there.
- A
data-slater-page-sizeabove the server's cap (1000) is clamped, and the counter follows what the server actually returned - so the next click resumes from the real end of the page rather than skipping the difference.