Paginator

Status	stable
Published	4.0.0

Routed

Pass a function that accepts a page number and returns a standard Vue Router location object to the route prop:

/docs/components/paginator?page=1

<dummy-counter />
<jds-paginator
    :route="paginator"
    :value="$route.query.page"
    pages="10"
    name="Routed Paginator" />

paginator(page: number) {
    return {
        ...this.$route,
        query: {
            ...this.$route.query,
            page,
            random: Math.floor(Math.random()*100)
        }
    }
}

Shorthand

Most of the time, you'll want to paginate with a page query param so users can use their native browser history to help navigate between pages. A naked route property will do exactly that.

Hover over each link to see that they will preserve the current URL while updating the page query param:

/docs/components/paginator?page=1

<dummy-counter />
<jds-paginator
    route
    :value="$route.query.page"
    pages="10"
    name="Routed Paginator" />

Non-routed

If you don't pass in a route prop, we'll support v-model based page handling.

<jds-paginator
    v-model="interactiveCurrentPage"
    :pages="interactivePages"
    name="Non-routed Paginator" />

Props

Prop	Value	Default	Purpose
`name`	any	"Pages"	A label for what this paginator is paginating. When read by screen readers, links will reflect this name and its action, e.g. "Candidates; Go to page 3". Required for accessibility. "Jobs"; "Candidates"
`pages`	number	1	Maximum number of pages available to the paginator.
`value`	number	1	Currently active page. Set this normally using a prop (`:value="$route.props .page"`) when using a route, or use `v-model` when non-routed.
`route`	`(page: number) => Location` or `true`/`''`	none	When a function, callback for resolving what each pagination link should point to. Return a Vue Router Location entity, as it will be passed into `router-link`'s `to` prop. True or empty string (either `:route="true"` or just `route` as prop) will use the `page` query string shorthand: `<router-link :to="{...this.$route, query: {...this.$route.query, page }}" />`

Events

Event	Payload	Purpose
`input`	`pageNumber: number`	Emitted when the user triggers a page change. Does not emit when using a `route` prop — watch the router instead like usual.

States

<jds-paginator class="jds-mb-8" value="1" pages="10" />
<jds-paginator class="jds-mb-8" value="2" pages="10" />
<jds-paginator class="jds-mb-8" value="3" pages="10" />
<jds-paginator class="jds-mb-8" value="4" pages="10" />
<jds-paginator class="jds-mb-8" value="5" pages="10" />
<jds-paginator class="jds-mb-8" value="6" pages="10" />
<jds-paginator class="jds-mb-8" value="7" pages="10" />
<jds-paginator class="jds-mb-8" value="8" pages="10" />
<jds-paginator class="jds-mb-8" value="9" pages="10" />
<jds-paginator class="jds-mb-8" value="10" pages="10" />

Lengths

<jds-paginator class="jds-mb-8" value="1" pages="1" />
<jds-paginator class="jds-mb-8" value="1" pages="2" />
<jds-paginator class="jds-mb-8" value="2" pages="3" />
<jds-paginator class="jds-mb-8" value="2" pages="4" />
<jds-paginator class="jds-mb-8" value="3" pages="5" />
<jds-paginator class="jds-mb-8" value="3" pages="6" />
<jds-paginator class="jds-mb-8" value="4" pages="7" />
<jds-paginator class="jds-mb-8" value="4" pages="8" />
<jds-paginator class="jds-mb-8" value="5" pages="9" />
<jds-paginator class="jds-mb-8" value="5" pages="10" />