SSM使用layui实现商品展示并分页，类似淘宝那样

一. 问题背景

1.1 效果图

如下：

1.2 本项目用到的技术

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

二. 解决方案

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

    <div style="margin-top:70px;" id="product" ></div>
    <div style="margin-top:640px;margin-left:200px;">
		 <div  id="layuipage" ></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)中再次进行获取数据，否则会进行无限刷新

• 下面给出js的完整的代码

<script>
    layui.use(['jquery', 'layer', 'miniAdmin', 'miniTongji', 'laypage'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniAdmin = layui.miniAdmin,
            miniTongji = layui.miniTongji,
            laypage = layui.laypage;
        
        var page = 1;//当前页
        var limit = 16;//每页显示的数目
        var resCount, resData ;
        var resPage = renderPage1();
        
        //渲染展示商品的html页面
        function renderProductHtml(data){
        	var str = "";//用来存储html内容
        	if(data.length > 0){
	        	$.each(data, function(v, o){
	        		str += "<div style='margin:auto; margin-bottom:130px;  width:150px; height:150px; float:left; text-align:center'><div><img alt='' src='"+o.imgPath+"' width='150px' height='150px'/></div>";
	        		str += "<div style='text-align:left'><div><label>商品名称:</label><span>"+o.productName+"</span></div>";
	        		str += "<div><label>价格:</label><span style='color:#FF3030;'>￥"+o.price+"</span></div>";
	        		str += "<div><label>新旧程度:</label><span>"+o.degree+"</span></div>";
	        		str += "<div><label>销量:</label><span style='color:#CDC9C9;'>"+o.sales+"</span>";
	        		str += "<label>库存:</label><span style='color:#CDC9C9;'>"+o.stock+"</span></div>";
	        		str += "<div style='display:none;'><label>商品ID:</label><span>"+o.product_id+"</span></div></div></div>";
	        	});
	        	$("#product").html(str);
        	}
        	
        }
        
        
        //同步加载商品数据
        function renderProduct(page, limit){
        	$.ajax({
        		async: false,
        		url: '/UsedProduct/product/getProductPage',
        		data: {"page": page, "limit": limit},
        		dataType: 'json',
        		success: function(result){
        			console.info(result);
        			resCount = result.count;
        			resData = result.data;
        			renderProductHtml(resData);
        		}
        	});
        }
        
        
        //分页的完整功能
        function renderPage1(){
             renderProduct(page, limit);
        	 laypage.render({
                 elem: 'layuipage'
                 ,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){
                	   renderProduct(page, limit);
                   }
                 }
               });
        }
    });
</script>

• ajax提交的请求，交给servlet处理，servlet必须返回json格式（所以必须加@ResponseBody注释的数据且接口必须是code，msg，count，data格式，servlet代码如下：

    @ResponseBody  
	@RequestMapping(value="/getProductPage")
	public Map<String, Object> getProductPage(@RequestParam("page")Integer page,
			@RequestParam("limit")Integer limit){
		Map<String,Object> map = new HashMap<String, Object>();
		PageInfo<Product> pageInfo = productService.getProductPage(page, limit);
		map.put("code", 0);
		map.put("msg", "操作成功");
		map.put("count", pageInfo.getTotal());
		map.put("data", pageInfo.getList());
		return map;
	}

有问题的小伙伴欢迎留言