UI libraries / Vue InstantSearch / Widgets

ais-pagination

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"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisPagination } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisPagination
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples
See live example

About this widget

The ais-pagination widget displays a pagination system which lets users change the current page of search results.

The Algolia search engine limits paginating to 1,000 hits per page.

Examples

Copy 
1

<ais-pagination />

Props

Parameter Description
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 you can 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

Parameter Description
default

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

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

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 widget.
  • 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
50
51

<ais-pagination>
  <template
    v-slot="{
      currentRefinement,
      nbPages,
      pages,
      isFirstPage,
      isLastPage,
      refine,
      createURL
    }"
  >
    <ul>
      <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>
  </template>
</ais-pagination>

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>

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.

Did you find this page helpful?
Vue InstantSearch v4