• Pagination 分页

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

    何时使用

    代码演示

    基础分页。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    ReactDOM.render(
      <Pagination
        defaultCurrent={1}
        total={50}
        tiny={false}
        showTotal={false}
        showSizeChanger={false}
      />, mountNode);
    
    更多分页。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    ReactDOM.render(
      <Pagination
        defaultCurrent={6}
        total={500}
        tiny={false}
        showTotal={false}
        showSizeChanger={false}
      />, mountNode);
    
    改变每页显示条目数。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    function onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    }
    
    ReactDOM.render(
      <Pagination
        tiny={false}
        showSizeChangerLabel={false}
        showTotal={false}
        onShowSizeChange={onShowSizeChange}
        defaultCurrent={3}
        total={500}
      />,
      mountNode);
    
    快速跳转到某一页。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    function onChange(pageNumber) {
      console.log('Page: ', pageNumber);
    }
    
    ReactDOM.render(
      <Pagination
        tiny={false}
        showSizeChangerLabel={false}
        showTotal={false}
        showSizeChanger={false}
        showQuickJumper
        defaultCurrent={2}
        total={500}
        onChange={onChange}
      />,
      mountNode
    );
    
    尺寸。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    function showTotal(total) {
      return `Total ${total} items`;
    }
    
    ReactDOM.render(
      <div>
        <Pagination tiny={false} size="large" total={50} showTotal={false} showSizeChanger={false} />
        <Pagination tiny={false} size="large" total={50} showTotal={false} showSizeChanger showQuickJumper />
        <Pagination tiny={false} size="large" total={50} showTotal={showTotal} showSizeChanger={false} />
        <Pagination tiny={false} size="small" total={50} showTotal={false} showSizeChanger={false} />
        <Pagination tiny={false} size="small" total={50} showTotal={false} showSizeChanger showQuickJumper />
        <Pagination tiny={false} size="small" total={50} showTotal={showTotal} showSizeChanger={false} />
      </div>,
      mountNode);
    
    微型版本。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    function showTotal(total) {
      return `Total ${total} items`;
    }
    
    ReactDOM.render(
      <div>
        <Pagination total={50} />
        <Pagination total={50} showSizeChanger showQuickJumper />
        <Pagination total={50} showTotal={showTotal} />
      </div>,
      mountNode);
    
    简单的翻页。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    ReactDOM.render(
      <Pagination simple defaultCurrent={2} total={50} />,
      mountNode);
    
    受控制的页码。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        current: 3,
      }
    
      onChange = (page) => {
        console.log(page);
        this.setState({
          current: page,
        });
      }
    
      render() {
        return (
          <Pagination
            current={this.state.current}
            onChange={this.onChange}
            total={50}
            tiny={false}
            showTotal={false}
            showSizeChanger={false}
          />
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    通过设置 showTotal 展示总共有多少数据。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Pagination
          total={85}
          showTotal={total => `Total ${total} items`}
          pageSize={20}
          defaultCurrent={1}
          tiny={false}
          showSizeChanger={false}
        />
        <br />
        <Pagination
          total={85}
          showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
          pageSize={20}
          defaultCurrent={1}
          tiny={false}
          showSizeChanger={false}
        />
      </div>,
      mountNode);
    
    修改上一步和下一步为文字链接。
    expand code expand code
    import { Pagination } from 'choerodon-ui';
    
    function itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <a>Previous</a>;
      }
      if (type === 'next') {
        return <a>Next</a>;
      }
      return originalElement;
    }
    
    ReactDOM.render(
      <Pagination tiny={false} showTotal={false} showSizeChanger={false} total={500} itemRender={itemRender} />,
      mountNode);
    

    API

    <Pagination onChange={onChange} total={50} />
    
    参数 说明 类型 默认值
    current 当前页数 number -
    defaultCurrent 默认的当前页数 number 1
    defaultPageSize 默认的每页条数 number 10
    hideOnSinglePage 只有一页时是否隐藏分页器 boolean false
    itemRender 用于自定义页码的结构,可用于优化 SEO (page, type: ‘page’ | ‘prev’ | ‘next’, originalElement) => React.ReactNode -
    pageSize 每页条数 number -
    pageSizeOptions 指定每页可以显示多少条 string[] [‘10’, ‘20’, ‘30’, ‘40’]
    showQuickJumper 是否可以快速跳转至某页 boolean false
    showSizeChanger 是否可以改变 pageSize boolean false
    showTotal 用于显示数据总量和当前数据顺序 Function(total, range) -
    simple 当添加该属性时,显示为简单分页 boolean -
    tiny 当添加该属性时,显示为简单分页 boolean true
    size 当为「small」时,是小尺寸分页 string ””
    total 数据总数 number 0
    onChange 页码改变的回调,参数是改变后的页码及每页条数 Function(page, pageSize) noop
    onShowSizeChange pageSize 变化的回调 Function(current, size) noop