Pagination

A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.

When To Use

• When it will take a long time to load/render all items.
• If you want to browse the data by navigating through pages.

Examples

Basic

<template>
  <a-pagination v-model:current="current" :total="50" />
</template>

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

const current = ref(1)
</script>

More

<template>
  <div>
    <a-pagination
      v-model:current="current1"
      :total="50"
      show-size-changer
      :page-size-options="['10', '20', '50', '100']"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
    />
    <br />
    <a-pagination
      v-model:current="current2"
      :total="500"
      show-size-changer
      :page-size-options="['10', '20', '50', '100']"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
    />
  </div>
</template>

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

const current1 = ref(1)
const current2 = ref(1)
</script>

Changer

<template>
  <div>
    <a-pagination
      :current="1"
      :total="50"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
      :page-size="20"
      :default-current="1"
    />
    <br />
    <a-pagination
      :current="1"
      :total="50"
      size="small"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
      :page-size="20"
      :show-size-changer="false"
    />
    <br />
    <a-pagination
      :current="1"
      :total="50"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
      :page-size="20"
      disabled
    />
  </div>
</template>

Jump

<template>
  <div>
    <a-pagination
      :current="1"
      :total="50"
      show-quick-jumper
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
    />
    <br />
    <a-pagination
      :current="1"
      :total="50"
      show-quick-jumper
      show-size-changer
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
    />
  </div>
</template>

Mini size

<template>
  <div>
    <a-pagination size="small" :current="1" :total="50" />
    <br />
    <a-pagination
      size="small"
      :current="1"
      :total="50"
      show-size-changer
      show-quick-jumper
    />
    <br />
    <a-pagination
      size="small"
      :current="1"
      :total="50"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
    />
  </div>
</template>

Simple mode

<template>
  <div>
    <a-pagination simple :current="1" :total="50" />
    <br />
    <a-pagination
      simple
      :current="1"
      :total="50"
      :show-total="(total, range) => `Total ${total} items`"
    />
  </div>
</template>

API

<a-pagination
  :current="1"
  :total="50"
  :page-size="10"
  :page-size-options="['10', '20', '50', '100']"
/>

Property	Description	Type	Default	Version
current (v-model)	Current page number	number	-
defaultCurrent	Default initial page number	number	1
defaultPageSize	Default number of data items per page	number	10
disabled	Disable pagination	boolean	-
hideOnSinglePage	Whether to hide pager on single page	boolean	false
itemRender	To customize item innerHTML	(page, type: 'page' | 'prev' | 'next', originalElement) => vNode | v-slot	-
pageSize (v-model)	Number of data items per page	number	-
pageSizeOptions	Specify the sizeChanger options	string[] | number[]	['10', '20', '50', '100']
responsive	If size is not specified, Pagination would resize according to the window width	boolean	-
showLessItems	Show less page items	boolean	false
showQuickJumper	Determine whether you can jump to pages directly	boolean | object	false
showSizeChanger	Determine whether to show pageSize select, it will be true when total > 50	boolean	-
showTitle	Show page item's title	boolean	true
showTotal	To display the total number and range	function(total, range)	-
simple	Whether to use simple mode	boolean	-
size	Specify the size of Pagination, can be set to small	string	-
total	Total number of data items	number	0

Events

Events Name	Description	Arguments	Version
change	Called when the page number or pageSize is changed, and it takes the resulting page number and pageSize as its arguments	function(page, pageSize)	-
showSizeChange	Called when pageSize is changed	function(current, size)	-