[Vuejs]-Vue Bootstrap Pagination Define :Total-rows

by

0👍

✅

You will need the API to return the total amount of rows, otherwise your frontend have no way of knowing how many pages to show.

You can find an example of this below, which use a dummy/testing API called reqres. This API returns various information, like the current page, total amount of rows and per page and of course the data for the requested page.

new Vue({
  el: "#app",
  data() {
    return {
      currentPage: 1,
      totalRows: 0,
      perPage: 0,
      users: [],
      request: null
    }
  },
  methods: {
    async getData(page) {
      const response = await fetch(`https://reqres.in/api/users?page=${page}&per_page=3`).then(resp => resp.json())
      this.perPage = response.per_page;
      this.users = response.data;
      this.totalRows = response.total;

      // Only for testing purposes
      this.request = response
    }
  },
  created() {
    this.getData(this.currentPage)
  }
})
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="app">
  <b-pagination 
        v-model="currentPage" 
      :total-rows="totalRows" 
      :per-page="perPage" 
      @change="getData">
  </b-pagination>
  <ul>
    <li v-for="{ first_name, last_name } in users">
      {{ first_name }} {{ last_name }}
    </li>
  </ul>
  Request
  <pre>{{ request }}</pre>
</div>

Leave a comment