Pagination
Use the KPagination component to navigate across pages of records, either connected directly to an ADataProvider or in standalone mode with two-way v-model binding.
Standalone Pagination
Active Page:1Total Pages:10
KPagination(
v-model="page"
:totalItems="100"
:pageSize="10"
:maxVisiblePages="7"
)
Provider-Connected Pagination
Provider Page:1Total Rows:85
const dataProvider = new CFlatClientDataProvider({ pageSize: 10 })
dataProvider.setData(items)
KPagination(:dataProvider="dataProvider" :maxVisiblePages="5")
Configure the KPagination component using these attributes.
| Name | Type | Default | Description |
|---|
| dataProvider | ADataProvider | undefined | Optional data provider. When provided, automatically synchronizes with provider page and page size. |
| v-model / modelValue | number | 1 | Active page number with two-way data binding. |
| v-model:currentPage / currentPage | number | 1 | Explicit named prop for active page number. |
| v-model:pageSize / pageSize | number | 10 | Number of items per page. |
| totalItems | number | undefined | Total record count (required for standalone mode when no dataProvider is supplied). |
| maxVisiblePages | number | 10 | Maximum number of visible numeric page buttons shown. |
Events emitted by the KPagination component.
| Name | Payload | Description |
|---|
| update:modelValue | (page: number) | Emitted when active page changes. |
| update:currentPage | (page: number) | Emitted when active page changes. |
| update:pageSize | (size: number) | Emitted when page size changes. |
| change | (page: number) | Emitted when active page changes. |