问题: 在使用layui的分页时,直接拿的示例放到自己的页面上,在做分页跳转时,点击其他分页,瞬间跳回了1
修改前:
function articleList(curPage, size) {
$.get("/", {
curPage: curPage,
size: size
}, function (data) {
creadeHtml("articleList", data.data.records)
setPage(data, curPage, size)
})
}
function setPage(data, curPage, size) {
var i = 0;
laypage.render({
elem: 'demo2'
, count: data.data.total
, limit: size
, theme: '#1E9FFF'
, curr: curPage //当前页
, jump: function (obj, first) {
if (!first) {
if (i == 0) {
articleList(obj.curr, obj.limit)
}
i += 1;
}
}
});
}
经过一番挣扎后, 翻了官网的参数说明,发现有个指向起始页的属性: curr
加上后,果然可以了:
function setPage(data, curPage, size) {
var i = 0;
laypage.render({
elem: 'demo2'
, count: data.data.total
, limit: size
, theme: '#1E9FFF'
, curr: curPage //当前页
, jump: function (obj, first) {
if (!first) {
if (i == 0) {
articleList(obj.curr, obj.limit)
}
i += 1;
}
}
});
}
总结: 我是通过ajax进行的异步访问,有返回值后再去调用layui分页,这时候相当于重新生成了一个分页插件, 而分页插件的jump回调函数内我又重新调了ajax获取数据, 循环往复每次都会创建一个新的分页插件laypage, 而我们没有去设置起始页,所以layui默认起始页为1, 所以会出现这个问题. 我们只需要将当前页面设置为laypage初始化时的起始页就达到了我们的需求.