Quick first, previous, next, last, and page buttons for pagination control
of another component (such as <b-table>
).
<template>
<div>
<h6>Default</h6>
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<h6>Small</h6>
<b-pagination size="sm" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<h6>Large</h6>
<b-pagination size="lg" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<div>currentPage: {{currentPage}}</div>
</div>
</template>
<script>
export default {
data () {
return {
currentPage: 3
}
}
}
</script>
Overview
<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
.
Customizing
<b-pagination>
supports several props that allow you to customize the appearance.
Prop |
Description |
limit |
Limit the maximum number of displayed page buttons (including ellipsis if present, and excluding first/prev/next/last buttons) |
total-rows |
The total number of records in your data |
per-page |
The maximum number of data records per page |
first-text |
The "goto first page" button text (html supported) |
prev-text |
The "goto previous page" button text (html supported) |
next-text |
The "goto next page" button text (html supported) |
last-text |
The "goto last page" button text (html supported) |
ellipsis-text |
the ... indicator text (html supported) |
hide-ellipsis |
never show ellipsis indicators |
hide-goto-end-buttons |
never display goto first/last buttons |
Ellipsis inidcator(s) will only be ever shown at the front and/or end of
the page number buttons. For limit
values less than or equal to 3
, the ellipsis
indicator(s) will never be shown for practical display reasons.
Alignment
By default the pagination component is left aligned. Change the alignment to
center
or right
(right
is an alias for end
) by setting the prop
align
to the appropriate value.
<template>
<div>
<h6>Left alignment (default)</h6>
<b-pagination :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<h6>Center alignment</h6>
<b-pagination align="center" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<h6>Right (end) alignment</h6>
<b-pagination align="right" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
<br>
<div>currentPage: {{currentPage}}</div>
</div>
</template>
<script>
export default {
data () {
return {
currentPage: 3
}
}
}
</script>
Small screen support
On smaller screens (i.e. mobile), some of the <b-pagination>
buttons will be hidden to
minimize the potential of the pagination interface wrapping onto multiple lines:
- The ellipsis indicators will be hidden on screens
xs
and smaller.
- Page number buttons will be limited to a maximum of 3 visible on
xs
screens and smaller.
This ensures that no more than 3 page number buttons are visible,
along with the goto first, prev, next, and last buttons.
Accessibility
The <b-pagination>
component provides many features to support assistive technology users,
such as aria-
attributes and keyboard navigation.
aria-controls
When pagination is controling another component on the page (such as <b-table>
), set
the aria-controls
prop to the id
of the element it is controling. This will help
non-sighted users know what component is being updated/controlled.
ARIA labels
<b-pagination>
provides various *-label-*
props which are used to set the aria-label
attributes on the various elements within the component, which will help users of
assistive technology.
Prop |
aria-label content default |
label-first-page |
"Goto first page" |
label-prev-page |
"Goto previous page" |
label-next-page |
"Goto next page" |
label-last-page |
"Goto last page" |
label-page |
"Goto page", appended with the page number |
aria-label |
"Pagination", applied to the outer pagination container |
Keyboard navigation support
<b-pagination>
supports keyboard navigation out of the box.
- Tabbing into the pagination component will autofocus the current page button
- LEFT and RIGHT arrow keys will focus the previous and next buttons in the page
list, respectively, and ENTER or SPACE keys will select (click) the focused page button
Events
<b-pagination>
provides two events that are emitted on the component:
input
is emitted anytime the current page changes (either programmatically or via user interaction)
change
is emitted only when the current page changes based on user interaction
Both events provide the single argument of the current page number (starting from 1)
See Also
For navigation based pagination, please see the <b-pagination-nav>
component.
Component Reference
Importing Individual Components
Component | Import Path |
---|
<b-pagination> | bootstrap-vue/es/components/pagination/pagination |
Example:
import bPagination from 'bootstrap-vue/es/components/pagination/pagination';
Vue.component('b-pagination', bPagination);
Importing Pagination as a Vue plugin
This plugin includes all of the above listed individual
components.
Plugins also include any component aliases.
import { Pagination } from 'bootstrap-vue/es/components';
Vue.use(Pagination);