# Pagination

> Canonical source: [Pagination](https://docs.hellowes.com/pagination/)

Webflow's CMS pagination and Load more rely on Webflow hosting, so they stop working on a WCH-hosted site. Use Slater Data for a client-side list with load more, search, and filters, or use WCH's legacy static pagination to generate one page per paginated state.

## Why Webflow pagination breaks on WCH

Webflow renders paginated collection lists on its servers. Each Next or Load more click asks Webflow for the next set of items. On a static WCH site there is no Webflow server behind the page, so those clicks return nothing.

You have two options. Slater Data is the recommended one.

## Recommended: Slater Data

[Slater Data](https://data.slater.app/) is a dependency-free script that adds load more, filtering, keyword search, sorting, and facets to a Webflow CMS list. You wire it up with `data-slater-*` attributes in the Webflow Designer. No JavaScript to write, and the list works on any host.

### Quick start

1. Set the site up in Slater and connect it to your Webflow site. The shared setup is in the [Slater Data docs](https://data.slater.app/docs).
2. On the collection list wrapper, add `data-slater-list` with a key you choose. On the items container, add `data-slater-results` with the same key.
3. Mark one card inside the list with `data-slater-template` and bind its fields.
4. Load the script once, before the closing `</body>` tag.

```
<!-- On the collection list wrapper -->
<div class="w-dyn-list" data-slater-list="blog">
  <div class="w-dyn-items" data-slater-results="blog">
    <!-- One card, marked as the template -->
    <div class="w-dyn-item" data-slater-template>
      <h2 data-slater-bind-text="heading"></h2>
      <p data-slater-bind-text="description"></p>
    </div>
  </div>
</div>

<button data-slater-load-more="blog">Load more</button>

<!-- Load the script once, before </body> -->
<script src="https://api.slater.app/embed/v1/slater-search.js" defer></script>
```

### The list key

`data-slater-list="blog"` gives the list a key. The key is a label you pick, not the collection slug. Every control for that list uses the same key: `data-slater-results`, `data-slater-load-more`, `data-slater-search`, `data-slater-empty`, `data-slater-count`.

The collection slug comes from `data-slater-collection`. If you leave it out, Slater uses the key as the slug. Name the list after the collection and you need nothing else. Use a separate key only when a page has two lists.

### Binding fields into the card

- **`data-slater-bind-text="field"`**: sets text. Never renders HTML.
- **`data-slater-bind-html="field"`**: sets sanitized HTML. Rich text fields only.
- **`data-slater-bind-src="field"`**: sets an image's src from an image field.
- **`data-slater-href="/blog/{slug}"`**: builds a link from a URL pattern. `{slug}`, `{name}`, `{id}`, or any field works inside the braces.
- **`data-slater-hide-empty`**: hides the node when its field is empty.

Field names are Webflow field slugs: lower-case, kebab-case, and case-sensitive. To find them, add `?slater-debug=1` to the page URL and read the console.

### Always mark the template

> **Set `data-slater-template` on one card.** If you omit it, Slater clones the first item with a console warning. That breaks cards that use Webflow conditional visibility, because a node that only exists when a field is filled will be missing from the template whenever the first item lacks that field. Author the template with every optional node present and mark the optional ones `data-slater-hide-empty`.

### Empty state, count, and clear

```
<div data-slater-empty="blog">No results found.</div>
<span data-slater-count="blog"></span>
<button data-slater-clear="blog">Clear all</button>
```

Leave these elements visible in the Designer. Slater hides them with an inline style. An element hidden by a Webflow class can never be shown by the script.

### More features

Keyword search over one list, filters, sorting, facet counts, multi-collection lists, typeahead, and JavaScript hooks are each covered in the [Slater Data docs](https://data.slater.app/docs). For a search box across the whole site, see the WCH [Search](/search) page.

## Legacy: WCH static pagination

WCH can also crawl a paginated Webflow list at publish time and generate a static page for each paginated state. Use this when you want plain server-rendered pages with no script, for example for SEO on a large archive. It is slower to publish and offers no search or filtering.

### How to enable it

1. In the Webflow Designer, select the collection list's pagination wrapper. Webflow gives it the class `w-pagination-wrapper`.
2. Add the class `wch-pagination` to that same element.
3. Publish in Webflow, then publish in WCH.

### What WCH does

- Detects the `wch-pagination` class on the page.
- Follows the Next and Previous links to fetch each paginated state.
- Writes a static page for each one, for example `/blog/page/2/` and `/blog/page/3/`, and rewrites the pagination links to those addresses.
- Crawls up to 50 pages per list.

### Things to know

- Every paginated state adds pages to the build, so publish time grows with the size of the list.
- Pagination inside CMS template pages multiplies the page count by the number of items and can cause publishing problems. Talk to WCH support before adding it to a template page.
- When a page is republished or deleted in WCH, its generated `/page/N/` children are updated or removed with it.