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>