Simple unstyled Vue pagination component.
Installation
npm install --save m24-vue-pagination
Example
import pagination from 'm24-vue-pagination'
new Vue({
el: '#app',
data: {
total: 0,
currentPage: 1,
items: [],
},
mounted () {
this.loadData(this.currentPage)
},
methods: {
loadData(page) {
this.currentPage = page
const options = {
params: {
page: this.currentPage
}
}
window.axios.get('/getData', options)
.then(response => {
this.items = response.data.data
this.total = response.data.paginate.total
})
}
},
components: {
pagination
}
})
<body id="app">
<ul class="list-group">
<li class="list-group-item" v-for="item in items">{{ item.name }}</li>
</ul>
<pagination
:total="total"
:page="currentPage"
@page-change="loadData" />
</body>
Props
total | Number | | true | Total number of items |
page | Number | 0 | | The current page number |
perPage | Number | 10 | | Number of items per page |
maxShown | Number | 5 | | Number of items shown on each site |
navBack | String | « | | Back indicator (can be HTML, such as svg, icon...) |
navFront | String | » | | Forward indicator (can be HTML, such as svg, icon...) |
Events
page-change | selected page | Event that sends back the selected page |
Contributing
Please see CONTRIBUTING for details.
License
The MIT License (MIT). Please see License File for more information.