同一页面使用layui的两个分页组件实现同步数据，不论哪个分页组件发生变化，另一个都同步数据

我使用的方法比较简单粗暴，需求是要在产品页的上下都放一个分页组件。并且两个分页组件数据实时同步。
html部分是这样两个分页组件夹着产品列表展示，（可以根据自己的来）

<!-- 分页 -->
<div id="demo-laypage-limits"></div>

<!-- 产品列表展示 -->
<div class="row rowlist" style="margin-top: 40px;"></div>

<!-- 分页 -->
<div id="demo-laypage-limits1"></div>

js部分，具体步骤，请求接口方法，拿到   “数据总数--将两个分页组件放入layui.use(['laypage', 'layer'], function (){}）中 ---- 当点击上/下分页组件时 ,分别调用updatePage1和updatePage2同步两个分页组件的数据”

<script>
    // 接口方法就不写了,根据自己实际来

     let queryObj = { // 接口的参数
        getType: getType,
        page: 1,
        limit: 30,
      }


      // 分页组件
      layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;
        var layer = layui.layer;

        // 上分页
        laypage.render({
          elem: 'demo-laypage-limits',
          count: countPage, // 数据总数
          limit: 30,// 每页条数
          limits: [30, 60, 90, 120],
          layout: ['prev', 'page', 'next', 'limit'],
          theme: '#d72323', // 自定义主题
          jump: function (obj, first) {
            queryObj.page = obj.curr // 得到当前页，以便向服务端请求对应页的数据。
            queryObj.limit = obj.limit // 得到每页显示的条数
            setArtileList() // 调用接口方法
            if (!first) {
              // 下分页也需要更新数据
              updatePage2(obj.curr, obj.limit);
            }
          }
        });

        // 下分页
        laypage.render({
          elem: 'demo-laypage-limits1',
          count: countPage, // 数据总数
          limit: 30,// 每页条数
          limits: [30, 60, 90, 120],
          layout: ['prev', 'page', 'next', 'limit'],
          theme: '#d72323',
          jump: function (obj, first) {
            queryObj.page = obj.curr // 得到当前页，以便向服务端请求对应页的数据。
            queryObj.limit = obj.limit // 得到每页显示的条数
            setArtileList()// 调用接口方法
            if (!first) {
              // 上分页也需要更新数据
              updatePage1(obj.curr, obj.limit);
            }
          }
        });

        // 更新下分页的数据
        function updatePage2(page, limit) {
          laypage.render({
            elem: 'demo-laypage-limits1',
            count: countPage,
            limit: limit,
            limits: [30, 60, 90, 120],
            layout: ['prev', 'page', 'next', 'limit'],
            theme: '#d72323',
            curr: page,
            jump: function (obj, first) {
              queryObj.page = obj.curr // 得到当前页，以便向服务端请求对应页的数据。
              queryObj.limit = obj.limit // 得到每页显示的条数
              setArtileList() // 调用接口方法
              if (!first) {
                // 上分页也需要更新数据
                updatePage1(obj.curr, obj.limit)
              }
            }
          });
        }

        // 更新上分页的数据
        function updatePage1(page, limit) {
          laypage.render({
            elem: 'demo-laypage-limits',
            count: countPage,
            limit: limit,
            limits: [30, 60, 90, 120],
            layout: ['prev', 'page', 'next', 'limit'],
            theme: '#d72323',
            curr: page,
            jump: function (obj, first) {
              // 模拟请求数据
              queryObj.page = obj.curr // 得到当前页，以便向服务端请求对应页的数据。
              queryObj.limit = obj.limit // 得到每页显示的条数
              setArtileList() // 调用接口方法
              if (!first) {
                // 下分页也需要更新数据
                updatePage2(obj.curr, obj.limit)
              }
            }
          });
        }

      });
</script>