Pagination 分页

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

何时使用#

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

API#

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

参数	说明	类型	默认值
current	当前页数	Number	无
defaultCurrent	默认的当前页数	Number	1
total	数据总数	Number	0
defaultPageSize	初始的每页条数	Number	10
pageSize	每页条数	Number
onChange	页码改变的回调，参数是改变后的页码	Function	noop
showSizeChanger	是否可以改变 pageSize	Bool	false
pageSizeOptions	指定每页可以显示多少条	Array	['10', '20', '30', '40']
onShowSizeChange	pageSize 变化的回调	Function	noop
showQuickJumper	是否可以快速跳转至某页	Bool	false
size	当为「small」时，是小尺寸分页	String	""
simple	当添加该属性时，显示为简单分页	Object	无
showTotal	用于显示总共有多少条数据	Function	无

代码演示

import { Pagination } from 'antd';

ReactDOM.render(
  <Pagination defaultCurrent={1} total={50} />,
 mountNode);

基本

基础分页。

import { Pagination } from 'antd';

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

ReactDOM.render(
  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={3} total={500} />,
 mountNode);

改变

改变每页显示条目数。

import { Pagination } from 'antd';

function showTotal(total) {
  return `共 ${total} 条`;
}

ReactDOM.render(<div>
  <Pagination size="small" total={50} />
  <br />
  <Pagination size="small" total={50} showSizeChanger showQuickJumper />
  <br />
  <Pagination size="small" total={50} showTotal={showTotal} />
</div>, mountNode);

迷你

迷你版本。

import { Pagination } from 'antd';
import enUS from 'antd/lib/pagination/locale/en_US';

ReactDOM.render(
  <Pagination defaultCurrent={1} total={50} locale={enUS} />,
 mountNode);

国际化

通过 locale 配置时区、语言等, 默认支持 en_US, zh_CN

import { Pagination, Select } from 'antd';

function showTotal(total) {
  return `共 ${total} 条`;
}

ReactDOM.render(
  <Pagination
    selectComponentClass={Select}
    total={80}
    showTotal={showTotal}
    pageSize={20} defaultCurrent={1} />,
  mountNode
);

总数

通过设置 showTotal 展示总共有多少数据。

import { Pagination } from 'antd';

ReactDOM.render(
  <Pagination defaultCurrent={1} total={500} />,
 mountNode);

更多分页。

import { Pagination } from 'antd';

ReactDOM.render(
  <Pagination showQuickJumper defaultCurrent={2} total={500} />,
 mountNode);

跳转

快速跳转到某一页。

import { Pagination } from 'antd';

ReactDOM.render(
  <Pagination simple defaultCurrent={2} total={50} />,
mountNode);

简洁

简单地翻页。

import { Pagination } from 'antd';

let Container = React.createClass({
  getInitialState() {
    return {
      current: 3
    };
  },
  onChange(page) {
    console.log(page);
    this.setState({
      current: page
    });
  },
  render() {
    return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
  }
});

ReactDOM.render(
<Container />,
mountNode);

受控

受控制的页码。