pagination 文件
组件文件地址
单个页面使用
引入
<link rel="stylesheet" href="/static/admin/pagination/pagination.css">
<script src="/static/admin/pagination/pagination.js"></script>
<div class="paging"></div>
data: function () {
return {
page: 1,
bannerList: [],
isPaged: false, //防止页码不动
}
},
created: function () {
// 获取轮播图接口
this.getBannerList()
},
methods: {
getBannerList() {
var that = this
apiRequest(adminApi.Banner.getList, { page: this.page, list_rows: 10 }, function (ret) {
// console.log(ret)
that.bannerList = ret.page_data
if (!that.isPaged) {
let paging = new Paging({
PageSize: 10,
total: ret.total,
onPage: function (page) {
// console.log(page)
that.page = page
// 当前页码
that.getBannerList()
}
})
that.isPaged = true
}
})
}
}
在一个页面多次使用该分页功能
data: function () {
return {
page0: 1,
page1: 1,
page2: 1,
page3: 1,
page4: 1,
page5: 1,
page6: 1,
page7: 1,
page8: 1,
page9: 1,
page10: 1,
page11: 1,
page12: 1,
isPaged1: false,
isPaged2: false,
isPaged3: false,
isPaged4: false,
isPaged5: false,
isPaged6: false,
isPaged7: false,
isPaged8: false,
isPaged9: false,
isPaged10: false,
isPaged11: false,
isPaged12: false,
}
},
methods: {
// 获取用户接口
getUserList() {
var that = this
apiRequest(adminApi.User.getList, { page: this.page0, list_rows: 10 }, function (ret) {
that.UserList = ret.page_data
if (!that.isPaged0) {
let paging0 = new Paging({
PageSize: 10,
container: document.getElementById('paging0'),
total: ret.total,
onPage: function (page) {
that.page0 = page
// 当前页码
that.getUserList()
}
})
that.isPaged0 = true
}
})
},
// 获取家庭接口
getFamilyList() {
var that = this
apiRequest(adminApi.Family.getList, { page: this.page1, list_rows: 10 }, function (ret) {
that.FamilyList = ret.page_data
if (!that.isPaged1) {
let paging1 = new Paging({
PageSize: 10,
container: document.getElementById('paging1'),
total: ret.total,
onPage: function (page) {
that.page1 = page
// 当前页码
that.getFamilyList()
}
})
that.isPaged1 = true
}
})
},
// 获取资讯接口
getArticleList() {
var that = this
apiRequest(adminApi.Article.getList, { page: this.page2, list_rows: 10 }, function (ret) {
that.FamilyList = []
that.ArticleList = ret.page_data
if (!that.isPaged2) {
let paging2 = new Paging({
PageSize: 10,
total: ret.total,
container: document.getElementById('paging2'),
onPage: function (page) {
that.page2 = page
// 当前页码
that.getArticleList()
}
})
that.isPaged2 = true
}
})
},
}