API Reference / Vue InstantSearch Widgets / ais-pagination
Apr. 24, 2019

ais-pagination

Widget signature 
<ais-pagination
  // Optional parameters
  :show-first="boolean"
  :show-previous="boolean"
  :show-next="boolean"
  :show-last="boolean"
  :padding="number"
  :total-pages="number"
  :class-names="object"
/>
See code examples
See Live example

About this widget

The ais-pagination widget displays a pagination system allowing the user to change the current page.

The widget is limited to 1,000 hits, which is what the maximum the engine lets you browse.

Examples

Copy
1

<ais-pagination />

Props

show-first
type: boolean
default: true
Optional

Whether to display the first page link.
Copy 
1

<ais-pagination :show-first="false" />
show-previous
type: boolean
default: true
Optional

Whether to display the previous page link.
Copy
1

<ais-pagination :show-previous="false" />
show-next
type: boolean
default: true
Optional

Whether to display the next page link.
Copy
1

<ais-pagination :show-next="false" />
show-last
type: boolean
default: true
Optional

Whether to display the last page link.
Copy
1

<ais-pagination :show-last="false" />
padding
type: number
default: 3
Optional

How many page links to display around the current page.
Copy
1

<ais-pagination :padding="2" />
total-pages
type: number
default: Infinity
Optional

The maximum number of pages to display (and to allow navigating to).
Copy
1

<ais-pagination :total-pages="5" />
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-Pagination: the root of the widget.
  • ais-Pagination--noRefinement: the root of the widget without refinement.
  • ais-Pagination-list: the list of the page items.
  • ais-Pagination-item: the page item of the list.
  • ais-Pagination-item--firstPage: the “first” item of the list.
  • ais-Pagination-item--lastPage: the “last” item of the list.
  • ais-Pagination-item--previousPage: the “previous” item of the list.
  • ais-Pagination-item--nextPage: the “next” item of the list.
  • ais-Pagination-item--page: the “page” item of the list.
  • ais-Pagination-item--selected: the selected item of the list.
  • ais-Pagination-item--disabled: the disabled item of the list.
  • ais-Pagination-link: the clickable element of an item.
Copy
1
2
3
4
5
6
7

<ais-pagination
  :class-names="{
    'ais-Pagination': 'MyCustomPagination',
    'ais-Pagination-list': 'MyCustomPaginationList',
    // ...
  }"
/>

Customize the UI

default

The slot to override the complete DOM output of the widget.

Scope

  • currentRefinement: number: the number of the selected page.
  • nbHits: number: the total number of hits.
  • nbPages: number: the total number of pages.
  • pages: number[]: the pages to render in the wiget.
  • isFirstPage: boolean: whether the current page is the first page.
  • isLastPage: boolean: whether the current page is the last page.
  • refine: (value: number) => void: a function to select the next page.
  • createURL: (value: number) => void: a function to generate an URL from a refinement.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<ais-pagination>
  <ul
    slot-scope="{
      currentRefinement,
      nbPages,
      pages,
      isFirstPage,
      isLastPage,
      refine,
      createURL
    }"
  >
    <li v-if="!isFirstPage">
      <a :href="createURL(0)" @click.prevent="refine(0)">
        ‹‹
      </a>
    </li>
    <li v-if="!isFirstPage">
      <a
        :href="createURL(currentRefinement - 1)"
        @click.prevent="refine(currentRefinement - 1)"
      >
        ‹
      </a>
    </li>
    <li v-for="page in pages" :key="page">
      <a
        :href="createURL(page)"
        :style="{ fontWeight: page === currentRefinement ? 'bold' : '' }"
        @click.prevent="refine(page)"
      >
        {{ page + 1 }}
      </a>
    </li>
    <li v-if="!isLastPage">
      <a
        :href="createURL(currentRefinement + 1)"
        @click.prevent="refine(currentRefinement + 1)"
      >
        ›
      </a>
    </li>
    <li v-if="!isLastPage">
      <a :href="createURL(nbPages)" @click.prevent="refine(nbPages)">
        ››
      </a>
    </li>
  </ul>
</ais-pagination>

If SEO is critical to your search page, your custom HTML markup needs to be parsable:

  • use plain <a> tags with href attributes for search engines bots to follow them,
  • use semantic markup with structured data when relevant, and test it.

Refer to our SEO checklist for building SEO-ready search experiences.

HTML output

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="ais-Pagination">
  <ul class="ais-Pagination-list">
    <li class="ais-Pagination-item ais-Pagination-item--firstPage ais-Pagination-item--disabled">
      <span class="ais-Pagination-link" aria-label="First">‹‹</span>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--previousPage ais-Pagination-item--disabled">
      <span class="ais-Pagination-link" aria-label="Previous">‹</span>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--selected">
      <a class="ais-Pagination-link" href="#">1</a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--page">
      <a class="ais-Pagination-link" href="#">2</a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--page">
      <a class="ais-Pagination-link" href="#">3</a>
    </li>
    <li class="ais-Pagination-item">
      <a class="ais-Pagination-link" href="#">4</a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--nextPage">
      <a class="ais-Pagination-link" aria-label="Next" href="#">›</a>
    </li>
    <li class="ais-Pagination-item ais-Pagination-item--lastPage">
      <a class="ais-Pagination-link" aria-label="Last" href="#">››</a>
    </li>
  </ul>
</div>

Did you find this page helpful?

Vue InstantSearch v2