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

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

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

Changer

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

1
2
3
4
5
•••
50
Goto

Jumper

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

1
2
3
4
5
10 / page
Goto

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

／5

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
current	current page number	number	-
defaultCurrent	default initial page number	number	1
defaultPageSize	default number of data items per page	number	10
hideOnSinglePage	Whether to hide pager on single page	boolean	false
itemRender	to customize item 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
showQuickJumper	determine whether you can jump to pages directly	boolean \| `{ goButton: ReactNode }`	false
showSizeChanger	determine whether `pageSize` can be changed	boolean	false
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	a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments	Function(page, pageSize)	noop
onShowSizeChange	a callback function, executed when `pageSize` is changed	Function(current, size)	noop

Components

Pagination

When To Use#

Examples

API#