vue-bootstrap-pagination
Pagination for vuejs with bootstrap
copy pagination.vue in your vue components
export default {
data() {
return {
data: [],
total: 0,
page: 1,
pagesize: 25
}
},
methods: {
loadData() {
$.ajax({
url: '/users',
data: {
page: this.page,
pagesize: this.pagesize,
},
success(res) {
this.total = res.total;
this.data = res.data;
}
});
},
changePage(page) {
this.page = page;
this.updateUrl();
},
updateUrl() {
this.loadData();
this.$router.push({
name: 'users.list',
query: {
page: this.page,
pagesize: this.pagesize
}
});
}
},
created() {
this.page = parseInt(this.$route.query.page || this.page);
this.pagesize = parseInt(this.$route.query.pagesize || this.pagesize);
this.loadData();
},
components: {
pagination: require('./components/pagination.vue')
}
}
<pagination :total="total" :page="page" :pagesize="pagesize" @change-page="changePage"></pagination>
Name |
Type |
Default |
Required |
Description |
page |
Number |
|
true |
Current page number |
pagesize |
Number |
|
true |
Page size |
total |
Number |
|
true |
Total items |
Name |
Params |
Description |
change-page |
page |
Change page callback |