layui信息加载流的方式加载数据

SSM项目中使用layui信息加载流的方式加载数据

---

这里首先jsp页面来一个div容器，这里数数据显示的地方

//css样式：
<style type="text/css">
		.right_main{
			width: 100%;
			height: 735px;
			border-radius: 5px;
			background-color: #fff;
			overflow: hidden;
		}
		.right_main{
			    overflow-x: hidden;
		        overflow-y: scroll;
		    }
		.right_main::-webkit-scrollbar {
		        display: none;
		  }  
</style>

//数据显示容器
<div class="right_main" id="right_main"></div>

js这样写：

<script type="text/javascript">
			//导入layui的j和自己需要的的部分
		layui.use(['jquery','flow'],function(){
			var  $=layui.jquery,		//这个就是可以不再单独去引入jquery
				 flow = layui.flow;		//这个加载必须引入
				
		   flow.load({
                elem: '#right_main'       //指定列表容器
                , isAuto: true     		  //到底页面底端自动加载下一页，设为false则点击'加载更多'才会加载
                , mb: 100         		  //距离底端多少像素触发auto加载
                , isLazying: true         //当单个li很长时，内部有很多图片，对图片进行懒加载，默认false。
                , end: '<p style="color:gray">木有了</p>'      //加载所有后显示文本，默认'没有更多了'
                , done: function (page, next) {               //到达临界，触发下一页
                    var lis = [];							  //这个我还没有去了解，不过这里需要这个东东，了解清楚了再补充
                   $.ajax({
					url:'../../user_getData.action',	    //请求数据路径
					type:'get',										//请求数据最好用get，上传数据用post
					data:{"page":page},   //传参 
							//这里说一哈“page” 这个 参数是你分页查询时开始的那个参数 就是  " ...  limit page,size"
							//还有就是page 会自动随着加载增加，这里就不用自己去增加数目了，就直接这样写就行了
					dataType:'json',
					success:function (res) {
                       	    //列表返回在data集合中
                        layui.each(res.data, function (index, item) {
                            //这里遍历数据
                            lis.push(
                            	//下面是你要拼接的样式，我这里是以前做的项目中需要的拼接的部分，我就直接用了
                           	    "<div class='item'>"+
								"<div class='item_img'>"+
								"<img src='../../img/fabufangyuan.png'>"+
								"<div class='item_info'>"+
								"<p>回龙观</p>"+
								"<p>【沙坪坝区】东大街腾龙四区3号楼1单元202室</p>"+
								"<p>精装<span>四室以上</span>南北</p>"+
								"</div></div>"+
								"<span>2019-11-1</span>"+
								"<span>待审核</span><span>"+
								"<a href=''>查看信息</a></span></div>"
                           	 );
                        });
                        next(lis.join(''), page < res.pages);	//pages是后台返回的总页数
                        }
                    });                    
                }
            });		

		})	
			
		</script>

请求的Action中

private int page=0;							//开始
private int size=5;							//每页多少条数据
private Map<String,Object> retMap;			//返回layui需要的map集合
private IHouseTableService houseService;	//service接口

...get、set方法 ....

	//方法
	public String getData(){

		List<Map<String,Object>> retList=houseService.serUserHousing(size*(page-1),size);

		int pages=houseService.serUserHousingCount()/size;
		if(houseService.serUserHousingCount(id)%size!=0){
			pages=pages+1;
		}
		//这里说一哈 houseService.serUserHousingCount() 这个是我自己写的获取总条数的方法，上面是计算出有多少页
		
		//拼凑成layui需要的样式
		 Map<String,Object> map=new HashMap<String, Object>();
						    map.put("code", 0);
						    map.put("msg", "请求数据中...");
						    map.put("pages",pages);				//返回的总页数
						    map.put("data", retList);		    //返回的数据集合
						   
						    retMap=map;							//赋值给	返回数据 retMap	    
		return "success";
	}

struts2.xml中

<action name="user_*" class="userAction" method="{1}">
		<!-- 获得信息 -->
		<result name="success" type="json">
			<param name="root">retMap</param>
		</result> 	
	</action>