www.sexvibe.video

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:

[js]
npm i bootstrap-vue bootstrap@4.0.0-beta.2
[/js]

OR # With Yarn:

[js]
yarn add bootstrap-vue bootstrap@4.0.0-beta.2
[/js]

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

/src/main.js

[js]
import BootstrapVue from ‘bootstrap-vue’
Vue.use(BootstrapVue);
[/js]

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.

[js]
import { Pagination } from ‘bootstrap-vue/es/components’
[/js]

[js]
Vue.use(Pagination)
[/js]

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

[html]

[/html]

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.

[html]


[/html]

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.

[codegroup]
[js tab=”main.js”]
//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: ‘‘,
components: { App }
})
[/js]
[html tab=”App.vue”]


[/html]
[/codegroup]

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!

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ANANDAN K
ANANDAN K
4 years ago

Thanks Dude

classy ebony stepdaughter screwed sensually.kirmiziyilan.com

1
0
Would love your thoughts, please comment.x
()
x