Pagination Guide

How to use pagination component

This component auto renders total page based on the data provided by api response.

Steps:

1. add paging data, this data will be used in the api url

data () {
return {
paging: {
page: 1,
size: 10,
totalRecords: 0
}
}
}

2. use this method change page

loadPage (page) {
this.paging.page = page
this.initPage() //this method contains the api call
}

3. Initialize the b-pagination component in the .vue

<div class="announcement__pagination-wrapper" v-if="!isLoading">
<b-pagination
:total="paging.totalRecords"
:current.sync="paging.currentPage"
:per-page="paging.size"
@change="loadPage"
range-before="1"
range-after="2"
order="is-centered">
</b-pagination>
</div>