layui的laypage多个实例上下页码实现同步显示

• 比如文章列表的上面和下面同时显示，他们显示是两个地方都显示，但是数据得保持一致

• 可能我的问题描述不是特别简易，简单来说就是，分页页面的上下都有页码的展示，但是他们又是两个实例，没法实行同步。

• 我原先的思路是，在上页码的分页操作时，让他对下页码的分页进行控制。反之，就是下页码进行操作时，也同时让他对上页码进行控制。但是这样行不通。原因会在下面代码引入后尽行解释。

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)
					}
                }
            });
        })
    }