Skip to content

Pagination

A component that can help you paginate records, for example from a Repeater or a DataFrame.

Fields

NameTypeDescriptionOptions
PageNumberThe current page number.
Page SizeNumberThe number of items per page.
Total ItemsNumberThe total number of items
Page Size OptionsTextA comma-separated list of page size options. If it's empty, the user can't change the page size. Set your default page size as the first option.
Show All OptionTextShow an option to show all records.
  • Yes
  • No
Jump ToTextShow an option to jump to a specific page.
  • Yes
  • No

Events

NameDescriptionUsage
ss-change-pageFires when the user pick a page
def handle_page_change(state, payload):
    page = payload
    state["page"] = page

    records = _load_records_from_db(start = state["page"] * state["pageSize"], limit = state["pageSize"])
    # update a repeater
    state["highlighted_members"] = {r.id: r for r in records}
ss-change-page-sizeFires when the user change the page size.
def handle_page_size_change(state, payload):
    state['pageSize'] = payload

    records = _load_records_from_db(start = state["page"] * state["pageSize"], limit = state["pageSize"])
    # update a repeater
    state["highlighted_members"] = {r.id: r for r in records}

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.Pagination(content={
        "page": 0.0, # Union[float, str] 
        "pageSize": 0.0, # Union[float, str] 
        "totalItems": 0.0, # Union[float, str] 
        "pageSizeOptions": "", # str 
        "pageSizeShowAll": "no", # str [yes, no]
        "jumpTo": "no", # str [yes, no]
    },
    handlers={
        "ss-change-page": handle_event,
        "ss-change-page-size": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference