Pagination 分页

采用分页的形式分隔长列表，每次只加载一个页面。

何时使用

当加载/渲染所有数据将花费很多时间时；
可切换页码浏览数据。

API

<Pagination onChange={onChange} total={50} />

参数	说明	类型	默认值
current	当前页数	Number	1
total	数据总数	Number	0
pageSize	每页条数	Number	10
onChange	页码改变的回调，参数是改变后的页码	Function	noop
showSizeChanger	是否可以改变 pageSize	Bool	false
onShowSizeChange	pageSize 变化的回调	Function	noop
showQuickJumper	是否可以快速跳转至某页	Bool	false
className	当为「mini」时，是小尺寸分页	String	ant-pagination
simple	当添加该属性时，显示为简单分页	Object	无

组件演示

var Pagination = antd.Pagination;

function onChange(page) {
  console.log(page);
}

React.render(
  <Pagination onChange={onChange} total={50} />,
 document.getElementById('components-pagination-demo-basic'));

基本

基础分页。

var Pagination = antd.Pagination;

function onChange(page) {
  console.log(page);
}

function onShowSizeChange(current, pageSize) {
  console.log(current, pageSize);
}

React.render(
  <Pagination showSizeChanger={true} onShowSizeChange={onShowSizeChange} onChange={onChange} total={500} />,
 document.getElementById('components-pagination-demo-changer'));

改变

改变每页显示条目数。

var Pagination = antd.Pagination;

function onChange(page) {
  console.log(page);
}

React.render(
  <Pagination className="mini" onChange={onChange} total={50} />,
 document.getElementById('components-pagination-demo-mini'));

迷你

迷你版本。

var Pagination = antd.Pagination;

function onChange(page) {
  console.log(page);
}

React.render(
  <Pagination onChange={onChange} total={500} />,
 document.getElementById('components-pagination-demo-more'));

更多分页。

var Pagination = antd.Pagination;

function onChange(page) {
  console.log(page);
}

React.render(
  <Pagination showQuickJumper={true} onChange={onChange} total={500} />,
 document.getElementById('components-pagination-demo-jump'));

跳转

快速跳转到某一页。

var Pagination = antd.Pagination;

function onChange(page) {
  console.log(page);
}

React.render(
  <Pagination simple onChange={onChange} total={50} />,
document.getElementById('components-pagination-demo-simple'));

简洁

简单地翻页。