一. 问题背景

1.1 效果图

如下：
在这里插入图片描述

1.2 本项目用到的技术

后台：SSM
前台：layui，全是html，没有jsp，所以在写路径时要记得加上/项目名
商品展示：使用layui的laypage，用ajax 同步请求提交

二. 解决方案

首先定义一个容器div用来展示商品，定义一个容器div用来显示分页导航栏

在这里先列出最最最关键的代码，就是渲染分页，记住必须在分页显示前就获取到商品的数据，否则分页导航栏将显示不出来

//分页的完整功能，page，limit，resCount都是自定义的全局变量

    function renderPage1(){ 
         renderProduct(page, limit);//关键
         laypage.render({ 
             elem: 'layuipage'//div的id，不能加#
             ,count: resCount//数据总条数
             ,limit: limit//每页显示多少条数据
             ,limits: [limit]//可选择的 每页显示多少条数据
             ,curr: page//当前页码
             ,theme: '#FFB800'//分页导航栏的颜色，用了橘色
             ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
             ,jump: function(obj, first){ 
               console.info(obj);
               page = obj.curr;
               if(!first){ //如果不是首次加载，那么进行ajax同步获取数据请求
                   renderProduct(page, limit);//关键
               }
             }
           });
    }

解释： 注意，elem的值中不能加#，从上面可以看到有一个renderProduct(page, limit)的方法，这是最最最最最最关键的代码，必须在进行渲染分页前就获得商品的数据（如商品ID，商品名称等等），获取完数据后，再进行分页渲染，然后在jump中的if(!first)中再次进行获取数据，否则会进行无限刷新