How to set the browsing page of the table?

[logandoo]

Question

Here is the code:

def display_toggle_update(table_name, rid, is_visible : int):
    requests.post('http://127.0.0.1:8000/api/display_toggle_update', json = {'table_name': table_name, 'rid': rid, 'is_visible': is_visible})
    create_table.refresh('Content', table_config[1]['button_info']['columns'], request_infomation('resource'))

I need to update the status of the toggle everytime the user clicked it, and in case of users could know the on time status of all toggles, I have to refresh the table after each request. However, when data is more than the pagination limit, the table would show the first page after I refresh it. I know I could achieve the current page of the table through table.pagination, then is there any way that I could go directly to the page I want after I refresh the table? Or is there any other way that I can update the on time toggle status?

[falkoschindler]

Please provide a minimal executable code example so that we can better see what is going on.
Why is it important to provide a minimal reproducible example?

[logandoo]

Oh, sorry, here is the sample:

from nicegui import ui

toggle_status = [{'resource_name': 'a', 'is_visible': False},{'resource_name': 'b', 'is_visible': False},{'resource_name': 'c', 'is_visible': False},{'resource_name': 'd', 'is_visible': False},{'resource_name': 'e', 'is_visible': False},{'resource_name': 'f', 'is_visible': False}]

columns = [
            {
                "name": "resource_name",
                "label": "resource_name",
                "field": "resource_name",
                "required": True,
                "align": "center",
                "style": "text-wrap: wrap; text-align: center"
            },
            {
                "name": "is_visible",
                "label": "is_visible",
                "field": "is_visible",
                "sortable": True,
                "align": "center",
                "style": "text-wrap: wrap; text-align: center"
            }
        ]

def display_toggle_update(resource_name, is_visible : bool):
    order = {'a': 0, 'b': 1, 'c': 2, 'd': 3, 'e': 4, 'f': 5}
    toggle_status[order[resource_name]].update({'is_visible': is_visible})
    create_table.refresh('Content', columns,  toggle_status)

@ui.refreshable
def create_table(title, columns, rows):
    with ui.element('div').classes('rounded-lg').style('margin: 0 auto; margin-top: 20px;margin-right: 70px; width: 1500px;'):
        with ui.table(title = title, columns = columns, rows = rows, selection = 'multiple', pagination = 5).classes('w-full bg-white opacity-90 text-center').style('word-wrap: break-word; text-align: center') as table:
            table.add_slot('body-cell-is_visible', """
                <q-td :props="props">
                    <q-toggle v-model="props.row.is_visible" @update:model-value="$parent.$emit('is_visible', props)" color='black'/>
                </q-td>
            """)
            table.on('is_visible', lambda msg: display_toggle_update(msg.args['row']['resource_name'], msg.args['row']['is_visible']))
    return table

table = create_table('Content', columns,  toggle_status)

ui.run(host= '0.0.0.0', port= 8808)

everytime when I click the toggle of "f" in the second page, the table will refresh and trun back to the first page. So I am thinking about if I can obtain the page number of "f" and everytime I click the toggle of "f", I can directly swtich to the right page.

[falkoschindler]

Yes, you can keep track of the current pagination state and use it to re-create the table:

rows = [
    {'name': f'item {i + 1}', 'state': False} for i in range(6)
]
columns = [
    {'name': 'name', 'label': 'name', 'field': 'name'},
    {'name': 'state', 'label': 'state', 'field': 'state'}
]
pagination = {'rows_per_page': 5}

def handle_state_change(e: events.GenericEventArguments) -> None:
    for row in rows:
        if row['name'] == e.args['row']['name']:
            row['state'] = e.args['row']['state']
    show_table.refresh()

@ui.refreshable
def show_table() -> None:
    table = ui.table(columns=columns, rows=rows, pagination=pagination)
    table.add_slot('body-cell-state', '''
        <q-td :props="props">
            <q-toggle v-model="props.row.state" @update:model-value="$parent.$emit('state_changed', props)" />
        </q-td>
    ''')
    table.on('state_changed', handle_state_change)
    table.on_pagination_change(lambda e: pagination.update(e.value))

show_table()