-
比如文章列表的上面和下面同时显示,他们显示是两个地方都显示,但是数据得保持一致
-
可能我的问题描述不是特别简易,简单来说就是,分页页面的上下都有页码的展示,但是他们又是两个实例,没法实行同步。
-
我原先的思路是,在上页码的分页操作时,让他对下页码的分页进行控制。反之,就是下页码进行操作时,也同时让他对上页码进行控制。但是这样行不通。原因会在下面代码引入后尽行解释。
function setPage(page,str,str2) {
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage
, layer = layui.layer;
//上页码完整功能
laypage.render({
elem: 'uppag'//上页码 它会被底下的实例给覆盖掉
,count: page
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function (obj) {
laypage.render({
elem: 'downpag'
,count: page
,curr:obj.curr//上页码的curr和limit来控制下页码
,limit:obj.limit
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function (obj2) {
pageCommon(obj2, str, str2)//调ajax获取分页数据
}
});
}
});
//下页码的完整功能
laypage.render({
elem: 'downpag'
, count: page
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
, jump: function (obj) {
#########原因//重新render一个upage实例 所以现在的实例会将上面的那个实例覆盖掉
laypage.render({
elem: 'uppag'
,count: page
,curr:obj.curr//下页码的curr和limit来控制上页码
,limit:obj.limit
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function (obj2) {
pageCommon(obj2, str, str2)//调ajax获取分页数据
}
});
}
});
}
- 问题分析出来了,那就开始解决它吧!我的思路是,//遵循一个原则 那就是只render一个页码实例
//那就将上下页码的render的实例封装出去
function setPage(page,str,str2) {
modularUppag(page,'',str,str2)
modularDownpag(page,'',str,str2)
}
function modularDownpag (page,obj,str,str2){
if(!!!obj){
obj.curr=''
obj.limit=''
}
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage
, layer = layui.layer;
laypage.render({
elem: 'downpag'
, count: page
, curr: obj.curr
, limit: obj.limit
, layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
, jump: function (obj2,first) {
if(!first){
modularUppag(page,obj2,str,str2)
}
pageCommon(obj2, str, str2)
}
});
})
}
function modularUppag (page,obj,str,str2){
if(!!!obj){
obj.curr=''
obj.limit=''
}
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage
, layer = layui.layer;
laypage.render({
elem: 'uppag'
, count: page
, curr: obj.curr
, limit: obj.limit
, layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
, jump: function (obj2,first) {
pageCommon(obj2, str, str2)
if(!first){
modularDownpag(page,obj2,str,str2)
}
}
});
})
}