m24-vue-pagination
v1.0.4
Published
Simple Vue.js pagination
Downloads
3
Maintainers
neoglyphReadme
vue-pagination
Simple unstyled Vue pagination component.
- Vue.js (tested with 2.6.11).
Installation
npm install --save m24-vue-paginationExample
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
| 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...)
Events
| Name | Returns | Description | :------------ | :--------| :----------- | 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.