java+layui实现流加载

我们需要引入jquery和layui使用的依赖js,

layui官网：https://www.layui.com/

引入依赖文件

html:

js：

参考文档：https://www.layui.com/doc/modules/flow.html

这里你可以通过ajax向后台传递自己的参数，如果使用自定义搜索时候清空ul下的元素，重新加载就可以了，这里就不列举了。

 

layui.use('flow', function(){
  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
  var flow = layui.flow;
  flow.load({
    elem: '#wz_show_infos' //指定列表容器
    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
      var lis = [];
      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
      $.get('get_info_list.call?page='+page, function(res){
        //假设你的列表返回在data集合中
        layui.each(res.data, function(index, item){
          lis.push('
'+ item.title +'
');
        }); 
        
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < res.pages);    
      });
    }
  });
});

 

java实现后台数据封装：

controller:

	@RequestMapping("/get_info_list.call")
	public void get_info_list(Integer page,HttpServletResponse response) throws IOException{
		anlService.get_info_list(page);
		response.getWriter().write(anlService.getReturnObject().toString());
	}

Service: 

	public void get_info_list(Integer page){
		String sql="";
		if(null==page){
			page=1;
		}
		if(null==size){
			size=8;
		}
		List list=comDao.findListByMySql(sql,page, size);
		JSONObject jo=new JSONObject();
		JSONArray ja=new JSONArray();
		for(CommonModel m:list){
			jo.put("id", m.getId());
			jo.put("r_name", m.getStr1());
			jo.put("prj_name", m.getStr2());
			jo.put("problem_type", MyproblemInfo(m.getStr3()));
			jo.put("data", m.getStr4());
			jo.put("content", m.getStr5());
			if(!"".equals(m.getStr6())&&null!=m.getStr6()){
				if(m.getStr6().indexOf("https") < 0){
					jo.put("img_url","../"+m.getStr6());
				}else{
					jo.put("img_url",m.getStr6());
				}
			}else{
				jo.put("img_url",null);
			}
			
			ja.add(jo);
		}
		JSONObject js=new JSONObject();
		js.put("data", ja);
		count=count%size==0?count/size:count/size+1;
		js.put("pages", count);
		super.setReturnObject(js);
	}