Skip to main content

Pager

The Pager control is a handy tool for dividing a large-scale content into pages and navigating between them. With SVAR Pager, you can easily set the total number of pages and the number of records rendered per page. It is also possible to specify what page that should be displayed in Pager at the moment.

Pager

Initialization​

To create a Pager instance on a page, you need to complete two steps:

  • import the source file of the control on a page:
App.vue
<script setup>
  import { Pager } from "@svar-ui/vue-core";
</script>
  • apply the <Pager> tag to initialize a pager:
App.vue
<template>
  <Pager />
</template>

The default pager is initialized with the first page active and 20 rows rendered per page.

Setting the value​

When a pager is created, the content of the 1st page is displayed. If you want to select a different page, use the value property and set the number of the page that should become active:

<Pager :value="2" :total="100" />

Related sample: Pager

Getting the current value​

It is possible to get the value of the page selected at the moment. For this, you need:

  • specify a variable that will contain the value of the pager (it may contain the initial value):
<script setup>
  import { ref } from "vue";
  import { Pager } from "@svar-ui/vue-core";

  const page = ref(2);
</script>
  • bind the variable to the value property of the control:
<Pager v-model:value="page" :total="100" />

After that the value assigned to the bound variable will be updated on each change of the selected page.

Related sample: Pager

Catching the change of the active page​

In case you need to catch the change of the selected page, you can do it by handling the change event. Inside the event you can get the value of the newly selected page in the following way:

<script setup>
  function changeHandler(ev) {
     const newState = ev;
      console.log(newState);
      // => {value: 2, from: 20, to: 40}
  }
</script>

<template>
  <Pager :value="2" :total="100" :onchange="changeHandler" />
</template>

The event handler will receive an object with the number of the newly opened page and the numbers of the start and end rows of this page.

Setting the total number of records​

You can specify the total number of records that should be split into pages. For this, you need to use the total property and set the desired number as a value:

<Pager :total="100" />

Related sample: Pager

Setting the number of records per page​

In order to distribute content among pages, it is necessary to specify how many records should be rendered at a page. The pageSize property is provided for this purpose. Set the number of records to be displayed per page as a value of this config:

<Pager :pageSize="30" />

Related sample: Pager