# Pagination

Pagination is used for dividing a large amount of data into pages, making it easier for users to read and find information.

[Design draft](https://www.figma.com/file/ODsctn1UVctS7TCZ1MlTHZ/%E2%98%81%EF%B8%8FMQloud_Design-Guidelines?type=design&node-id=496%3A35575&t=cjeWPvmqIWr8LWFS-1)


<br>

## Anatomy


1. Current page position
2. If on the first page, display the next 3 pages; if on a middle page, display the previous 2 pages and the next 2 pages.
3. Last page
4. Next page
5. Next ten pages

<br>

## Types


1. **Pagination**: Regular pagination
2. **Infinite Scroll Pagination**: Used when some pages cannot load all data at once, so the last page is not displayed.
3. **Compact Pagination**: Used for pagination in small lists, without the next ten pages functionality.

<br>

## Usage

### Large Lists

For full-page large lists (e.g., Instance List, Database List), it is recommended to use the large pagination. **If the page data cannot be loaded at once, use the infinite scroll pagination.**

### Small Lists

For tables within form creation (e.g., Instance creation with Instance type list), it is recommended to use the compact pagination.

<br>

## Layout



<br>

## Behavior

### Infinite Scroll Pagination


1. Initial position is on the first page, preloading the next 3 pages of data.
2. When switching to the 4th page, clicking the Next Page or Next Ten Pages button will navigate to the corresponding position.
3. When switching to the 5th page, preloading the next 2 pages of data.
4. When switching to the 6th page, preloading the 8th page of data, and so on.

<br>

---

###### tags: `en / Components`