Simple unstyled Vue pagination component.
- Vue.js (tested with 2.6.11).
npm install --save m24-vue-pagination
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>| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| 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...) |
| Name | Returns | Description |
|---|---|---|
| page-change | selected page | Event that sends back the selected page |
Please see CONTRIBUTING for details.
The MIT License (MIT). Please see License File for more information.