# Pagination

## Introduction

**`Pagination`** is a widget that allows to use page selection. If you have too much data to display in one page, use pagination.

## Function signature

```python
Pagination(
    total,
    layout="prev, pager, next, jumper, ->, total",
    current_page=1,
    small=False,
    page_size=10,
    page_sizes=[10, 20, 30, 40, 50, 100],
    widget_id=None,
)
```

```python
pagination = Pagination(total=50)
```

![](https://user-images.githubusercontent.com/120389559/227777410-1953c671-fd43-4778-903a-2c5de639325a.gif)

## Parameters

|      Parameters     |     Type    |                       Description                       |
| :-----------------: | :---------: | :-----------------------------------------------------: |
|       `total`       |    `int`    |              Total `Pagination` item count              |
|     `page_size`     |    `int`    |                 Item count of each page                 |
|    `current_page`   |    `int`    |                   Current page number                   |
|       `layout`      |    `str`    | Layout of `Pagination`, elements separated with a comma |
|      `compact`      |    `bool`   |            Whether to use compact pagination            |
| `page_size_options` | `List[int]` |              Options of item count per page             |
|     `widget_id`     |    `str`    |                     ID of the widget                    |

### total

Determine the total items count.

**type:** `int`

### page\_size

Determine the item count of each page.

**type:** `int`

**default value:** `10`

```python
pagination = Pagination(total=50, page_size=5)
```

![](https://user-images.githubusercontent.com/120389559/227778169-ca2179f7-7e84-4b82-ade5-45f790ec1adc.png)

### current\_page

Determine the current page number.

**type:** `int`

**default value:** `1`

```python
pagination = Pagination(total=50, current_page=3)
```

![](https://user-images.githubusercontent.com/120389559/227777949-fdb7ebf3-1e90-44ca-b4ef-8e1a00f60b03.png)

### layout

Determine the layout for `Pagination`, elements separated with a comma. Possible values: `sizes, prev, pager, next, jumper, ->, total, slot`.

* `sizes` - item count per page options
* `prev` - previous page button
* `pager` - page number buttons
* `next` - next page button
* `jumper` - jump to page input
* `->` - moves widget to the right side
* `total` - total item count

**type:** `str`

**default value:** `"prev, pager, next, jumper, ->, total"`

```python
pagination = Pagination(
    total=50,
    layout="sizes, prev, pager, next, jumper, ->, total, slot"
)
```

![](https://user-images.githubusercontent.com/120389559/227777864-2368f10d-524f-4a18-8e21-63c4f52bb4cf.png)

### compact

Determine whether to use small pagination.

**type:** `bool`

**default value:** `False`

```python
pagination = Pagination(total=50, compact=True)
```

![](https://user-images.githubusercontent.com/120389559/227778032-3bc9c752-34d9-450d-814b-8b46c55cf214.png)

### page\_size\_options

Determine options of item count per page.

**type:** `List[int]`

**default value:** `[10, 20, 30, 40, 50, 100]`

```python
pagination = Pagination(
    total=1000,
    page_sizes=[10, 20, 50],
    layout="prev, pager, next, sizes"
)
```

![](https://user-images.githubusercontent.com/120389559/227778326-43b6ac36-9024-4646-8010-551617a4027a.gif)

### widget\_id

ID of the widget.

**type:** `str`

**default value:** `None`

## Methods and attributes

|   Attributes and Methods  | Description                                                             |
| :-----------------------: | ----------------------------------------------------------------------- |
|    `set_current_page()`   | Set `Pagination` current page.                                          |
|    `get_current_page()`   | Return `Pagination` current page.                                       |
|       `set_total()`       | Set `Pagination` total items count.                                     |
|       `get_total()`       | Return `Pagination` total items count.                                  |
|     `set_page_size()`     | Set `Pagination` page sizes. Must be one of possible page sizes options |
|     `get_page_size()`     | Return `Pagination` page sizes.                                         |
| `set_page_size_options()` | Set `Pagination` possible page sizes options.                           |
| `get_page_size_options()` | Return `Pagination` possible page sizes options.                        |
|       `set_layout()`      | Set `Pagination` layout.                                                |
|     `@current_change`     | Decorator function to handle `current-page` change.                     |
|       `@size_change`      | Decorator function to handle `page-size` change.                        |

## Mini App Example

You can find this example in our Github repository:

[supervisely-ecosystem/ui-widgets-demos/controls/009\_pagination/src/main.py](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/controls/009_pagination/src/main.py)

### Import libraries

```python
import os

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Card, Container, Pagination, Text
```

### Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

```python
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()
```

### Initialize `Pagination` and `Text` widgets

```python
pagination = Pagination(
    total=1000, page_size=20, page_sizes=[10, 20, 50], layout="prev, pager, next, sizes, total"
)

text_page = Text()
text_size = Text()
```

### Create app layout

Prepare a layout for app using `Card` widget with the `content` parameter.

```python
card = Card(
    "Pagination",
    content=Container([pagination, text_page, text_size]),
)
layout = Container(widgets=[card])
```

### Create app using layout

Create an app object with layout parameter.

```python
app = sly.Application(layout=card)
```

### Add functions to control widgets from python code

```python
@pagination.current_change
def page_change(res):
    info = f"Current page number: {res}"
    text_page.set(text=info, status="info")


@pagination.size_change
def page_size_change(res):
    info = f"Current page size: {res}"
    text_size.set(text=info, status="success")
```

<div align="center"><img src="https://user-images.githubusercontent.com/120389559/227779108-bbb467d3-2706-45ef-8d8e-db92359eadd7.gif" alt=""></div>