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.svelte
<script>
    import { Pager } from "wx-svelte-core";
</script>
  • apply the <Pager> tag to initialize a pager:
App.svelte
<Pager />

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>
    import { Pager } from "wx-svelte-core";

    let page = 2;
</script>
  • bind the variable to the value property of the control:
<Pager bind:value={page} total={100} />

If the name of the variable matches its value, you can use the shorthand while binding the property: 

<script>
    import { Pager } from "wx-svelte-core";

    let value = 2;
</script>

<Pager bind:value 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>
    function changeHandler(ev) {
        const newState = ev.detail;
        console.log(newState); 
        // => {value: 2, from: 20, to: 40}
    }
</script>

<Pager value={2} total={100} on:change={changeHandler} />

The handler function of the change event takes the CustomEvent object as a parameter and in its detail property it contains 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