Getting started with Vue Pager component

7 May 20258 minutes to read

This section explains you the steps required to create a simple pager
and demonstrate the basic usage of the pager component in Vue environment.

Prerequisites

System requirements for Syncfusion® Vue UI components

Setup Vue Environment

You can use Vue CLI to setup your vue applications.
To install Vue CLI use the following commands.

npm install -g @vue/cli
npm install -g @vue/cli-init

Create a Vue Application

Start a new Vue application using below Vue CLI command.

vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion® Pager package

All the available Essential® JS 2 packages are published in npmjs.com registry.

To install pager component, use the following command

npm install @syncfusion/ej2-vue-grids --save

The –save will instruct NPM to include the grid package inside of the dependencies section of the package.json.

Registering Pager Component

You can register the pager component in your application by using the Vue.use().

Refer to the code example given below.

import { PagerPlugin } from '@syncfuion/ej2-vue-grids';

Vue.use(PagerPlugin);

Adding CSS Reference

The pager has different themes. They are:

  • Material
  • Office 365
  • Fabric
  • Bootstrap
  • High Contrast

Import pager component CSS as given below in <style> section of the App.vue file.

<style>
<!-- Material theme used for this sample -->
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Adding Pager component

Add the Vue pager by using <ejs-pager> selector in <template> section of the App.vue file.

Import pager plugin into Vue application[src/App.vue] from the package @syncfusion/ej2-vue-grids.

Now place the below pager code in the App.vue.
Here the pager is rendered with totalRecordsCount which is used to render numeric container.

<template>
  <div id="app">
      <ejs-pager> </ejs-pager>
  </div>
</template>
<script setup>
import { PagerComponent as EjsPager } from '@syncfusion/ej2-vue-grids';
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Modify the template in [src/app.vue] file to render the pager component.

<template>
  <div id="app">
      <ejs-pager :totalRecordsCount='20'> </ejs-pager>
  </div>
</template>
<script setup>
import { PagerComponent as EjsPager } from '@syncfusion/ej2-vue-grids';
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Page Size

pageSize value defines the number of records to be displayed per page. The default value for the pageSize is 12.

<template>
  <div id="app">
      <ejs-pager :pageSize='1' :totalRecordsCount='20'> </ejs-pager>
  </div>
</template>

<script setup>

import { PagerComponent as EjsPager } from '@syncfusion/ej2-vue-grids';
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
  <div id="app">
      <ejs-pager :pageSize='1' :totalRecordsCount='20'> </ejs-pager>
  </div>
</template>

<script>
import { PagerComponent } from '@syncfusion/ej2-vue-grids';
export default {
name: "App",
components: {
"ejs-pager":PagerComponent
},
  data () {
    return {
    }
  }
}
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Page sizes

The pageSizes property in the Syncfusion® Pager component allows you to control the number of records displayed per page through a DropDownList integrated into the pager. This feature enhances the experience by providing flexibility in data viewing.

Enabling Page Sizes

To enable the pageSizes property, follow these steps:

  1. Import the PagerDropDown and Pager modules from the Syncfusion® Grid package.

  2. Inject the PagerDropDown into the Pager module to enable the DropDownList in the pager.

  3. Configure the pageSizes property by setting it to either true or providing an array of custom values to define the available page size options.

The following example demonstrates how to include the pageSizes property in the pager component.

<template>
  <div id="app">
      <ejs-pager :pageSize='10' :totalRecordsCount='200' :pageSizes="pageSizes"> </ejs-pager>
  </div>
</template>

<script setup>

import { PagerComponent as EjsPager, Pager, PagerDropDown  } from '@syncfusion/ej2-vue-grids';

Pager.Inject(PagerDropDown);
const pageSizes= [10, 20, 50, 100]
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
  <div id="app">
      <ejs-pager :pageSize='10' :totalRecordsCount='200' :pageSizes="pageSizes"> </ejs-pager>
  </div>
</template>

<script>
import { PagerComponent, Pager, PagerDropDown } from '@syncfusion/ej2-vue-grids';

Pager.Inject(PagerDropDown);

export default {
name: "App",
components: {
"ejs-pager":PagerComponent
},
  data () {
    return {
      pageSizes: [10, 20, 50, 100]
    }
  }
}
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>

Page Count

pageCount value defines the number of pages to be displayed in the pager component for navigation.
The default value for pageCount is 10 and value will be updated based on totalRecordsCount
and pageSize values.

<template>
  <div id="app">
      <ejs-pager :pageSize='1' :pageCount='3' :totalRecordsCount='20'> </ejs-pager>
  </div>
</template>

<script setup>
import { PagerComponent as EjsPager } from '@syncfusion/ej2-vue-grids';
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
  <div id="app">
      <ejs-pager :pageSize='1' :pageCount='3' :totalRecordsCount='20'> </ejs-pager>
  </div>
</template>

<script>
import { PagerComponent } from '@syncfusion/ej2-vue-grids';
export default {
name: "App",
components: {
"ejs-pager":PagerComponent
},
  data () {
    return {
    }
  }
}
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Run the application

Use the following command to run the application in browser.

npm run dev

Output will be appears as follows.

<template>
  <div id="app">
      <ejs-pager :pageSize='1' :pageCount='3' :totalRecordsCount='20'> </ejs-pager>
  </div>
</template>

<script setup>
import { PagerComponent as EjsPager } from '@syncfusion/ej2-vue-grids';
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
<template>
  <div id="app">
      <ejs-pager :pageSize='1' :pageCount='3' :totalRecordsCount='20'> </ejs-pager>
  </div>
</template>

<script>

import { PagerComponent } from '@syncfusion/ej2-vue-grids';
export default {
name: "App",
components: {
"ejs-pager":PagerComponent,
},
  data () {
    return {
    }
  }
}
</script>

<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>