Paging component

The Paging component implements pagination in grids implemented using Listing. It also creates an instance of the child Sizes component which allows to define the number of records displayed in the associated table.

Options

Option
Description
Type
Default Value
current
The number of current page.
String
1
sizesConfig.maxSize
The maximum number of elements on a page configuration that is passed to the Sizes component.
Object
999
sizesConfig.minSize
The minimum number of elements on a page configuration that is passed to the Sizes component.
Object
1
template
The path to the component’s .html template.
String
ui/grid/paging/paging
totalTmpl
Path to the .html template for rendering the total amount of found records.
String
ui/grid/paging-total

Source files

Extends UiElement:

Examples

Integration

This example integrates the Paging component with the Listing component:

<listing>
    ...
    <listingToolbar>
        ...
        <paging name="listing_paging"/>
    </listingToolbar>
</listing>

Result

Paging Component example

Configure page size and options

This example configures the Paging component with the page size and options:

<paging name="listing_paging">
    <settings>
        <options>
            <option name="32" xsi:type="array">
                <item name="value" xsi:type="number">32</item>
                <item name="label" xsi:type="string">32</item>
            </option>
            <option name="48" xsi:type="array">
                <item name="value" xsi:type="number">48</item>
                <item name="label" xsi:type="string">48</item>
            </option>
            <option name="64" xsi:type="array">
                <item name="value" xsi:type="number">64</item>
                <item name="label" xsi:type="string">64</item>
            </option>
        </options>
        <pageSize>32</pageSize>
    </settings>
</paging>

Result

Configured Paging Component example