Searchstax PaginationWidget for Vue

The SearchStax Site Search solution offers a Vue pagination widget to assist with you custom search page.

The SearchstaxPaginationWidget component displays pagination controls for search results.

Slots

#pagination

Allows customizing the pagination UI.

Slot props:

  • paginationData – Pagination info object
  • nextPage – Handler for next page click
  • previousPage – Handler for previous page click

Usage

1
<SearchstaxPaginationWidget></SearchstaxPaginationWidget>

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template #pagination="{ paginationData, previousPage, nextPage }">
                <div
                  class="searchstax-pagination-container"
                  v-if="paginationData"
                >
                  <div class="searchstax-pagination-content">
                    <a
                      class="searchstax-pagination-previous"
                      :disabled="paginationData?.isFirstPage"
                      @click="previousPage"
                      id="searchstax-pagination-previous"
                    > < Previous </a>
                    <div class="searchstax-pagination-details"> {{ paginationData?.startResultIndex }} - {{
                      paginationData?.endResultIndex }} of {{ paginationData?.totalResults }} </div>
                    <a
                      class="searchstax-pagination-next"
                      :disabled="paginationData?.isLastPage"
                      @click="nextPage"
                      id="searchstax-pagination-next"
                    >Next ></a>
                  </div>
                </div>
</template>

Questions?

Do not hesitate to contact the SearchStax Support Desk.