Pagination

Pagination component

Repository status

Detailed changes for each release are documented in Changelog

If you are using vue 2.x version, please use v-page 2.x version instead

Installation

Install v-page component in to your project

npmyarnpnpm

npm i v-page

npm i v-page

yarn add v-page

yarn add v-page

pnpm add v-page

pnpm add v-page

Globally install component

// add component in global scope as plugin
import { createApp } from 'vue'
import App from './app.vue'
import { PaginationBar } from 'v-page'

const app = createApp(App)
app.use(PaginationBar, {
  // globally config options
})
app.mount('#app')

// add component in global scope as plugin
import { createApp } from 'vue'
import App from './app.vue'
import { PaginationBar } from 'v-page'

const app = createApp(App)
app.use(PaginationBar, {
  // globally config options
})
app.mount('#app')

Can global config options in plugin install

info
pageSizeMenu
language
align
border
pageNumber
first
last

You can also use components only where you need them, which is the more recommended way to use them. This is more conducive to code splitting and packaging

vue

<template>
  <PaginationBar />
</template>

<script setup>
import { PaginationBar } from 'v-page'
</script>

<template>
  <PaginationBar />
</template>

<script setup>
import { PaginationBar } from 'v-page'
</script>

Use component on page

vue

<template>
  <div
    v-for="item in list"
    :key="item.key"
    v-text="item.name"
  />

  <PaginationBar
    v-model="pageNumber"
    :total-row="totalRow"
    @change="change"
  />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const pageNumber = ref(3)
const totalRow = ref(100)
const list = ref([])
// respond for pagination change
function change (data) {
  console.log(data) // { pageNumber: 1, pageSize: 10 }

  const params = {
    pageNumber: data.pageNumber,
    pageSize: data.pageSize,
    ...
  }
  // do some http request for example
  axios.post('some-api-address', params).then(resp => {
    // fetch new data and update data list and `totalRow` variable
    list.value = resp.list || []
    totalRow.value = resp.totalRow
  })
}
</script>

<template>
  <div
    v-for="item in list"
    :key="item.key"
    v-text="item.name"
  />

  <PaginationBar
    v-model="pageNumber"
    :total-row="totalRow"
    @change="change"
  />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const pageNumber = ref(3)
const totalRow = ref(100)
const list = ref([])
// respond for pagination change
function change (data) {
  console.log(data) // { pageNumber: 1, pageSize: 10 }

  const params = {
    pageNumber: data.pageNumber,
    pageSize: data.pageSize,
    ...
  }
  // do some http request for example
  axios.post('some-api-address', params).then(resp => {
    // fetch new data and update data list and `totalRow` variable
    list.value = resp.list || []
    totalRow.value = resp.totalRow
  })
}
</script>

Examples

Quick demo

vue

<template>
  <PaginationBar
    :total-row="21"
    @change="changeBasic"
  />
</template>

<template>
  <PaginationBar
    :total-row="21"
    @change="changeBasic"
  />
</template>

Pagination change event response data

Gallery data

vue

<template>
  <div>
    <div
      v-for="item in listGallery"
      :key="item"
      v-text=item
    />
  </div>
  <PaginationBar
    :total-row="88"
    :language="lang"
    align="left"
    @change="changeGallery"
  />
</template>
<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const srcList = Array(88).fill(0).map((val, index) => index + 1)
const listGallery = ref([])

function changeGallery ({ pageNumber, pageSize }) {
  const start = pageSize * (pageNumber - 1)
  const end = (start + pageSize) > srcList.length
    ? srcList.length
    : start + pageSize

  listGallery.value = srcList.filter((val, index) => {
    return index >= start && index < end
  })
}
</script>

<template>
  <div>
    <div
      v-for="item in listGallery"
      :key="item"
      v-text=item
    />
  </div>
  <PaginationBar
    :total-row="88"
    :language="lang"
    align="left"
    @change="changeGallery"
  />
</template>
<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const srcList = Array(88).fill(0).map((val, index) => index + 1)
const listGallery = ref([])

function changeGallery ({ pageNumber, pageSize }) {
  const start = pageSize * (pageNumber - 1)
  const end = (start + pageSize) > srcList.length
    ? srcList.length
    : start + pageSize

  listGallery.value = srcList.filter((val, index) => {
    return index >= start && index < end
  })
}
</script>

Pagination operation

Some cases showing how pagination operation works

vue

<template>
  <div>
    <input type="text" v-model="inputPageNumber" />
    <button type="button" @click="goToInputPage" >go</button>
    <button type="button" @click="pageNumberOperate++" >pageNumber + 1</button>
  </div>

  <PaginationBar v-model="pageNumberOperate" />
</template>

<script setup>
import { ref } from 'vue'

const pageNumberOperate = ref(3)
const inputPageNumber = ref('2')

function goToInputPage () {
  if (!inputPageNumber.value) return

  const newPageNumber = Number(inputPageNumber.value)

  if (window.isNaN(newPageNumber)) {
    inputPageNumber.value = ''
    return
  }
  pageNumberOperate.value = newPageNumber
}
</script>

<template>
  <div>
    <input type="text" v-model="inputPageNumber" />
    <button type="button" @click="goToInputPage" >go</button>
    <button type="button" @click="pageNumberOperate++" >pageNumber + 1</button>
  </div>

  <PaginationBar v-model="pageNumberOperate" />
</template>

<script setup>
import { ref } from 'vue'

const pageNumberOperate = ref(3)
const inputPageNumber = ref('2')

function goToInputPage () {
  if (!inputPageNumber.value) return

  const newPageNumber = Number(inputPageNumber.value)

  if (window.isNaN(newPageNumber)) {
    inputPageNumber.value = ''
    return
  }
  pageNumberOperate.value = newPageNumber
}
</script>

Alignment direction

vue

<PaginationBar align="left" />

<PaginationBar align="left" />

Specify alignment direction

Display border mode

vue

<PaginationBar :border="true" />

<PaginationBar :border="true" />

Enabled and disabled

vue

<PaginationBar :disabled="true" />

<PaginationBar :disabled="true" />

EnabledDisabled

Modules on / off

Setup pagination modules on or off

Slot

v-page provides scoped slots to output pagination state for more easily customization

vue

<template>
  <PaginationBar
    border
    align="left"
    :total-row="28"
    :page-size-menu="false"
    :info="false"
    :first="false"
    :last="false"
    v-slot="{ pageNumber, pageSize, totalPage, totalRow, isFirst, isLast }"
  >
    <div>
      <div>page: <span v-text="pageNumber" /></div>
      <div>pageSize: <span v-text="pageSize" /></div>
      <div>totalPage: <span v-text="totalPage" /></div>
      <div>totalRow: <span v-text="totalRow" /></div>
      <div>isFirst: <span v-text="isFirst" /></div>
      <div>isLast: <span v-text="isLast" /></div>
    </div>
  </PaginationBar>
</template>

<template>
  <PaginationBar
    border
    align="left"
    :total-row="28"
    :page-size-menu="false"
    :info="false"
    :first="false"
    :last="false"
    v-slot="{ pageNumber, pageSize, totalPage, totalRow, isFirst, isLast }"
  >
    <div>
      <div>page: <span v-text="pageNumber" /></div>
      <div>pageSize: <span v-text="pageSize" /></div>
      <div>totalPage: <span v-text="totalPage" /></div>
      <div>totalRow: <span v-text="totalRow" /></div>
      <div>isFirst: <span v-text="isFirst" /></div>
      <div>isLast: <span v-text="isLast" /></div>
    </div>
  </PaginationBar>
</template>

page: 0
pageSize: 10
totalPage: 3
totalRow: 28
isFirst: false
isLast: false
«
1
2
3
»

Display all data option

Add All item to page size list to display all data without paging. When this item is selected, the response data of the change event is as follows

{
  pageNumber: 1,
  pageSize: 0
}

{
  pageNumber: 1,
  pageSize: 0
}

Props

v-model/value

type number

Set current page / default page

total-row

type number

The total number of records in each data request

language

type string
default 'en'

Specify the pagination language, check below for a complete language list

'cn' 简体中文
'en' English
'de' German
'pt' Portuguese
'jp' Japanese

type number[] | boolean
default [10, 20, 50, 100]

Set page size item in to list, set false to close page size selection module

align

type 'left' | 'center' | 'right'
default 'right'

Pagination alignment direction

disabled

type boolean
default false

Enabled / Disabled Pagination component

info

type boolean
default true

Display pagination status information module

border

type boolean
default false

Display outline borders in each modules

page-number

type boolean
default true

Display page numbers

first

type boolean
default true

Display first page button

last

type boolean
default true

Display last page button

display-all

type boolean
default false

Add All option to display all data in to page size list

Events

Component operation response events

change

Response event triggered when data changes in the operation of pagination

change: (data: PageInfo) => void

change: (data: PageInfo) => void

interface PageInfo {
  // Current page number
  pageNumber: number
  // Page size
  pageSize: number
}
// You can also use the type directly in the following way
import type { PageInfo } from 'v-page/types'

interface PageInfo {
  // Current page number
  pageNumber: number
  // Page size
  pageSize: number
}
// You can also use the type directly in the following way
import type { PageInfo } from 'v-page/types'

API

Before using Pagination component's API, need to declare a ref attribute for the component, declare a ref variable by ref() to hold the element reference(the name must match template ref value) and use it to call API methods

vue

<template>
  <PaginationBar ref="page" />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const page = ref(null)
// call api
page.value.goPage(3)
</script>

<template>
  <PaginationBar ref="page" />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const page = ref(null)
// call api
page.value.goPage(3)
</script>

goPage

Go to specified page

goPage: (page: number) => void

goPage: (page: number) => void

reload

Update pagination state and re-trigger component events

reload: () => void

reload: () => void

Pagination ​

Installation ​

Use component on page ​

Examples ​

Quick demo ​

Gallery data ​

Pagination operation ​

Alignment direction ​

Display border mode ​

Enabled and disabled ​

Modules on / off ​

Slot ​

Display all data option ​

Props ​

v-model/value ​

total-row ​

language ​

page-size-menu ​

align ​

disabled ​

info ​

border ​

page-number ​

first ​

last ​

display-all ​

Events ​

change ​

API ​

goPage ​

reload ​