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

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

pagination = Pagination(total=50)

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

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

current_page

Determine the current page number.

type: int

default value: 1

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

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"

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

compact

Determine whether to use small pagination.

type: bool

default value: False

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

page_size_options

Determine options of item count per page.

type: List[int]

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

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

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

Import libraries

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:

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

api = sly.Api()

Initialize Pagination and Text widgets

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.

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.

app = sly.Application(layout=card)

Add functions to control widgets from python code

@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")