Basic
More
Changer
Jumper
Mini size
Simple mode
Controlled
Total number
Prev and next

Pagination

A long list can be divided into several pages using 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

Basic pagination.

import { Pagination } from 'antd';

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

1
•••
4
5
6
7
8
•••
50

More pages.

import { Pagination } from 'antd';

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

1
2
3
4
5
•••
50
10 / page

1
2
3
4
5
•••
50
10 / page

Changer

Change pageSize.

import { Pagination } from 'antd';

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

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

1
2
3
4
5
•••
50
Go to

1
2
3
4
5
•••
50
Go to

Jumper

Jump to a page directly.

import { Pagination } from 'antd';

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

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

1
2
3
4
5
10 / page
Go to

Total 50 items
1
2
3
4
5

Mini size

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

Simple mode

Simple mode.

import { Pagination } from 'antd';

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

Controlled

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

Total 85 items
1
2
3
4
5

1-20 of 85 items
1
2
3
4
5

Total number

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

Previous
1
2
3
4
5
•••
50
Next

Prev and next

Use text link for prev and next button.

import { Pagination } from 'antd';

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

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

API#

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

Property	Description	Type	Default	Version
current	Current page number	number	-
defaultCurrent	Default initial page number	number	1
defaultPageSize	Default number of data items per page	number	10
disabled	Disable pagination	boolean	-	3.18.0
hideOnSinglePage	Whether to hide pager on single page	boolean	false	3.1.0
itemRender	To customize item's innerHTML	(page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode	-
pageSize	Number of data items per page	number	-
pageSizeOptions	Specify the sizeChanger options	string[]	['10', '20', '30', '40']
showLessItems	Show less page items	boolean	false	3.16.3
showQuickJumper	Determine whether you can jump to pages directly	boolean \| `{ goButton: ReactNode }`	false
showSizeChanger	Determine whether `pageSize` can be changed	boolean	false
showTitle	Show page item's title	boolean	true
showTotal	To display the total number and range	Function(total, range)	-
simple	Whether to use simple mode	boolean	-
size	Specify the size of `Pagination`, can be set to `small`	string	""
total	Total number of data items	number	0
onChange	Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments	Function(page, pageSize)	noop
onShowSizeChange	Called when `pageSize` is changed	Function(current, size)	noop

Components63

Pagination

When To Use#

Examples

API#