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);

受控制的页码。