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 navigating through pages.

Examples

Basic pagination.

expand codeexpand code
import { Pagination } from 'antd';

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

More pages.

expand codeexpand code
import { Pagination } from 'antd';

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

Change pageSize.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
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.

expand codeexpand code
import { Pagination } from 'antd';

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

Controlled page number.

expand codeexpand code
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.

expand codeexpand code
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);

Use text link for prev and next button.

expand codeexpand code
import { Pagination } from 'antd';

function itemRender(current, type, originalElement) {
  if (type === 'prev') {
    return <a>Previous</a>;
  } else if (type === 'next') {
    return <a>Next</a>;
  }
  return originalElement;
}

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

API#

<Pagination onChange={onChange} total={50} />
PropertyDescriptionTypeDefault
currentcurrent page numbernumber-
defaultCurrentdefault initial page numbernumber1
totaltotal number of data itemsnumber0
defaultPageSizedefault number of data items per pagenumber10
pageSizenumber of data items per pagenumber-
onChangea callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its argumentsFunction(page, pageSize)noop
showSizeChangerdetermine whether pageSize can be changedbooleanfalse
pageSizeOptionsspecify the sizeChanger optionsstring[]'10', '20', '30', '40'
onShowSizeChangea callback function, executed when pageSize is changedFunction(current, size)noop
showQuickJumperdetermine whether you can jump to pages 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)-
itemRenderto customize item innerHTML(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode-