Pagination
Quick first, previous, next, last, and page buttons for pagination control of another component (such as <b-table> or lists).
Do you know the latest update of 2022? Our roadmap is alive for future updates.
Basic
<b-pagination> is a custom input component that provides a current page number input control. The value should be bound via v-model in your app. Page numbers are indexed from 1. The number of pages is computed from the provided prop values for total-rows and per-page.
For pagination that changes to a new URL, use the <b-pagination-nav> component instead.
Example Usage with <b-table>:
Current Page: 1
Id | First Name | Last Name |
|---|---|---|
| 1 | Fred | Flintstone |
| 2 | Wilma | Flintstone |
| 3 | Barney | Rubble |
Button content
For a full list of all available slots see the Slots section below.
- …
- …
Goto first/last button type
If you prefer to have buttons with the first and last page number to go to the corresponding page, use the first-number and last-number props.
Goto first button number
- …
- …
Goto last button number
- …
- …
Goto first and last button number
- …
- …
Button size
Optionally change from the default button size by setting the size prop to either 'sm' for smaller buttons or 'lg' for larger buttons.
Small
Default
Large
Pill style
Easily switch to pill style buttons by setting the pills prop
Small Pills
Default Pills
Large Pills
Alignment
By default the pagination component is left aligned. Change the alignment to center, right (right is an alias for end), or fill by setting the prop align to the appropriate value.