ant-design-vue/components/pagination/index.en-US.md
果冻橙 f265a7bb02
fix docs dark theme & add docs coverDark (#6367)
* fix docs dark theme & add docs coverDark

* fix theme Editor edit
2023-03-20 11:15:02 +08:00

2.4 KiB

category type title cols cover coverDark
Components Navigation Pagination 1 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original

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.

API

<a-pagination @change="onChange" :total="50" />
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 - 1.5.0
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[] ['10', '20', '30', '40']
responsive If size is not specified, Pagination would resize according to the width of the window boolean - 3.1
showLessItems Show less page items boolean false 1.5.0
showQuickJumper determine whether you can jump to pages directly boolean false
showSizeChanger Determine whether to show pageSize select, it will be true when total > 50 boolean -
showTitle Show page item's title boolean true 1.5.0
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
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) noop
showSizeChange a callback function, executed when pageSize is changed Function(current, size) noop