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,        //这个就是可以不再单独去引入jqueryflow = 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，上传数据用postdata:{"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>

layui信息加载流的方式加载数据相关推荐

AES方式加解密的简单介绍
上面一篇文章介绍了使用DES方式进行加解密( DES方式加解密的简单介绍),我们说了DES由于使用8个字节(64bit)密钥进行加解密,所以安全性不够(当然这里的不够都是相对的),所以现在使用了密钥更 ...
《深入浅出DPDK》读书笔记（九）：流分类与多队列、流过滤、虚拟化流分类方式、流分类技术的使用
Table of Contents 94.Linux内核对多队列的支持 95.DPDK与多队列 98.流分类 99.RSS 100.Flow Director 101.服务质量 102.虚拟化流分类方 ...
电动力学每日一题 2021/10/23 载流板产生的电磁场
电动力学每日一题 2021/10/23 载流板产生的电磁场载流板的辐射载流板的辐射先验证电荷守恒: ∂ρ∂t=−∇⋅J=−∂∂zJz=0\frac{\partial \rho}{\partial ...
2023年高频前端面试项目考点（npm，git，webpack，TS4，sass，瀑布流，懒加载）
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客 *表示回顾基础知识项目为二面三面,面试官基本就是照着简历 ...
【UE】大世界子关卡StreamingLevel加载流程源码浅析-虚幻4
受限于硬件,当项目需要制作大世界的时候,整张大地图无法也没必要全部加载进内存.和所有支持大世界的引擎一样,UE采取了分块加载的方式:除了一个持久关卡(PersistentLevel)的加载以外,采用的 ...
aspx ttf文件加载不出来_加载页面信息，刷不出来心态都崩了
出品 | 51Testing软件测试网只要访问过网页的地球人都知道,很多时候页面内容的加载并非与你的访问操作实时同步显现.是什么原因导致的呢?这是由于大多数Web应用程序都结合Ajax/Javasc ...
Spring加载流程源码
一.从AbstractApplicationContext的体系说起第一,从类结构设计上看, 围绕着是否需要Refresh容器衍生出两个抽象类: GenericApplicationContext: ...
中jsp加载不出来layui_加载页面信息，刷不出来心态都崩了
出品 | 51Testing软件测试网只要访问过网页的地球人都知道,很多时候页面内容的加载并非与你的访问操作实时同步显现.是什么原因导致的呢?这是由于大多数Web应用程序都结合Ajax/Javasc ...
【js】【cornerstone】cornerstone使用url方式加载图像
[js][cornerstone]cornerstone使用url方式加载图像引入cornerstoneWebImageLoader loadImage 引入cornerstoneWebImageL ...

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

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

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

js这样写：

请求的Action中

struts2.xml中

layui信息加载流的方式加载数据相关推荐

最新文章

热门文章