Vue.js Pagination Example With Bootstrap [Server-side Pagination]

1

This article will help you to create a Vue.js pagination example with Bootstrap 4 and it can be used with your Vue.js new or existing app.

The serverside pagination is always crucial to implement because it’s a standard practice to call the data from server, on the fly.

It’s easy to use the pagination that works only on the client-side, but that could create performance issues when the application goes bigger. So, it’s always recommended to use a pagination that supports server-side call.

Moreover, it should be responsive and compatible with your app.

Here, we’ll create a Vue.js 2.x and Bootstrap 4 compatible pagination that you can use with your Vue.js app.

So, let’s get started with the Vue.js pagination example.

1. Install Bootstrap In Your App

Note: Here, I assume that you’ve already setup your Vue.js app. If not, you can visit How To Install and Setup Vue.js.

First of all, let’s install the bootstrap in your Vue.js app.

# With NPM:

npm i bootstrap-vue bootstrap@4.0.0-beta.2

OR # With Yarn:

yarn add bootstrap-vue bootstrap@4.0.0-beta.2

Next, let’s import the bootstrap dependencies in main.js of your app.

/src/main.js

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

Now, we’re all set to use any of Bootstrap 4 components using BootstrapVue withing our app.

2. Vue.js Pagination Example With Bootstrap 4

First of all, we need to import the pagination component to use it as a plugin.

import { Pagination } from 'bootstrap-vue/es/components'

Vue.use(Pagination)

Finally, you can use pagination by just putting few lines of code with needed options.

<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10"></b-pagination>

Here, we’re going to fetch the data from a REST API call and populate the data in the browser with pagination enabled.

So, let’s see how template part works.

<template>
  <div id="app">
    {{title}}
    <div class="row">
      <div class="col-md-12">
        <li v-for="item in posts">
          {{ item.id }} : {{ item.title }}
        </li>   
      </div>
    </div>

    <b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10" @input="getPostData(currentPage)">
    </b-pagination>
 
    <div>currentPage: {{currentPage}}</div>
  </div>    
</template>

<script>
//Import axios for REST API calls
import axios from 'axios'
//Import bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css'
//Import bootstrap vue CSS
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default {
  name: 'app',
  data () {
    return {
      title: 'Vue.js Pagination Example With Bootstrap',
      currentPage: 1,
      limit: 5,
      posts: []
    }
  },
  methods: {
    // Fetches posts when the component is created.
    getPostData (currentPage) {
      axios.get('http://jsonplaceholder.typicode.com/posts?_page='+this.currentPage+'&_limit='+this.limit)
      .then(response => {
        console.log(response)
        // JSON responses are automatically parsed.
        this.posts = response.data
      })
      .catch(e => {
        this.errors.push(e)
      })
    }
  },
  //Called when page rendered
  mounted(currentPage){
    this.getPostData(currentPage)
  }
}
</script>

Options,

  • b-pagination size can be defined as md (default), sm and lg options.
  • b-pagination alignment can be defined as left, center and right.

Takeaways,

  • Firstly, we’ve populated the data those are fetched by using the REST API calls using Axios.
  • Secondly, we’ve defined b-pagination component with the parameters like total-rows and per-page.
  • Finally, in the script part, we’ve call the REST API to fetch the data and that data will be populated in the template.

Notes,

  • Here, you can change total-rows and per-page limit as per your need.
  • Also, I’ve used the dummy JSON data, you can use any RESP API as per your requirement.

Here, is the full code that you can use it to integrate a bootstrap pagination with Vue.js app.

//Import Vue
import Vue from 'vue'
//Import App Component
import App from './App'
//Import Router
import router from './router'
//Import Bootstrap
import BootstrapVue from 'bootstrap-vue'
//Import Pagination component
import { Pagination } from 'bootstrap-vue/es/components'

Vue.config.productionTip = false

Vue.use(BootstrapVue);
Vue.use(Pagination)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

<template>
  <div id="app">
    {{title}}
    <div class="row">
      <div class="col-md-12">
        <li v-for="item in posts">
          {{ item.id }} : {{ item.title }}
        </li>   
      </div>
    </div>

    <b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10" @input="getPostData(currentPage)">
    </b-pagination>
 
    <div>currentPage: {{currentPage}}</div>
  </div>    
</template>

<script>
//Import axios for REST API calls
import axios from 'axios'
//Import bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css'
//Import bootstrap vue CSS
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default {
  name: 'app',
  data () {
    return {
      title: 'Vue.js Pagination Example With Bootstrap',
      currentPage: 1,
      limit: 5,
      posts: []
    }
  },
  methods: {
    // Fetches posts when the component is created.
    getPostData (currentPage) {
      axios.get('http://jsonplaceholder.typicode.com/posts?_page='+this.currentPage+'&_limit='+this.limit)
      .then(response => {
        console.log(response)
        // JSON responses are automatically parsed.
        this.posts = response.data
      })
      .catch(e => {
        this.errors.push(e)
      })
    }
  },
  mounted(currentPage){
    this.getPostData(currentPage)
  }
}
</script>

Here, if you’re looking to use few more properties with your pagination, you can visit bootstrap pagination document.

Moveover, I hope it helped you to integrate a Vue.js pagination example with your app.

Don’t forget to share with your friends on following social media!

Leave a Reply

1 Comment on "Vue.js Pagination Example With Bootstrap [Server-side Pagination]"

avatar
  Subscribe  
newest oldest most voted
Notify of
ANANDAN K
Guest

Thanks Dude