Pagination Component for Vue.js Using Bootstrap
vue-pages
vue-pages is a simple pagination component for Vue, which uses Bootstrap, and has support for Vue 2.0+.
Check the following example to see how it works.
Script:
const vuePages = require('vue-pages')
export default {
data () {
return {
url1: '#',
url2: '?param=pages',
pageName:'p',
total: 65,
counts: 11,
current1: 12,
current2: 5
}
},
methods: {
fn1(d, e){
this.current1 = d
},
fn2(d, e){
e.preventDefault()
this.current2 = d
}
},
components: {
vuePages
}
}Parameters
- url: URL
- pageName: parameter's Name
- counts: the count of page numbers that appear
- total: total pages
- current: the current page number
- fn: the provided click hanlder
Template:
<div id="app">
<h1>Simple Pagination component for Vue</h1>
<vue-pages :url="url1" :total="total" :counts="counts" :current="current1" :fn="fn1"></vue-pages>
<vue-pages :url="url2" :total="total" :counts="counts" :current="current2" :fn="fn2"></vue-pages>
<h3>vue-pages</h3>
</div>You can bind direclty to the parameters you ve set into the components template.
The above config will get you the following result.
