Pagination

A long list can be divided into several pages by 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 switching in the pages.

Examples

Basic pagination.

import { Pagination } from 'antd';

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

More pages.

import { Pagination } from 'antd';

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

Change pageSize.

import { Pagination } from 'antd';

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

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

Jump to a page directly.

import { Pagination } from 'antd';

function onChange(pageNumber) {
  console.log('Page: ', pageNumber);
}

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

Mini size pagination.

import { Pagination } from 'antd';

function showTotal(total) {
  return `Total ${total} items`;
}

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

Simple mode.

import { Pagination } from 'antd';

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

Controlled page number.

import { Pagination } from 'antd';

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} />;
  }
}

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

You can show the total number of data by setting showTotal.

import { Pagination } from 'antd';

ReactDOM.render(
  <div>
    <Pagination
      total={85}
      showTotal={total => `Total ${total} items`}
      pageSize={20}
      defaultCurrent={1}
    />
    <br />
    <Pagination
      total={85}
      showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
      pageSize={20}
      defaultCurrent={1}
    />
  </div>
, mountNode);

API#

<Pagination onChange={onChange} total={50} />
PropertyDescriptionTypeDefault
currentcurrent page numbernumber-
defaultCurrentdefault current page numbernumber1
totaltotal number of datanumber0
defaultPageSizedefault number of data per pagenumber10
pageSizenumber of data per pagenumber-
onChangea callback function, can be executed when the page number is changing, and it takes the resulting page number and pageSize as its argumentsFunction(page, pageSize)noop
showSizeChangerdetermine whether pageSize can be changedbooleanfalse
pageSizeOptionsspecify the sizeChanger selectionsstring[]['10', '20', '30', '40']
onShowSizeChangea callback function, can be executed when pageSize is changingFunction(current, size)noop
showQuickJumperdetermine whether you can jump to a page directlybooleanfalse
sizespecify the size of Pagination, can be set to smallstring""
simplewhether to use simple modeboolean-
showTotalto display the total number and rangeFunction(total, range)-