最易懂的layui分页 layui前端框架之分页
|
该篇文章是在layui前端框架之分页基础上简洁化和详细化。 首先该示例采用的是Spring+MyBatis Plus+SpringMVC(常规的SSM框架),持久层换成MyBatis也行。 至于layui,官网为:http://www.layui.com/ 所有的文档和相关示例都可以在里面找到，layui是一个开源的前端框架，主要是由一位叫贤心的人在维护。 该框架，在码云或者github相关项目应用比较广，几乎很多开源项目直接或者间接的采用它。 比如jeesite等。当然我公司项目也采用它，主要是它的弹出层和分页做的挺不错的。而且很多组件对于用户体验也是很不错的。 下面进入示例: ? 至于放置位置可以，如果是示例工程的话，可以全部放在<head></head>之中，建议先示例工程确认没问题，再用于生产工程。 生产工程还是老规矩，css文件放置<head</head>之中，js放在<body>结束标签的前面。以引用的jQuery库为最上，之所以最上，是因为引用的js文件有一部分是自己编写的，而且该文件里面用到jQuery，如果放在引用jQuery函数的下面，就会导致jQuery函数不能用，从而导致不能显示对应的效果。 layui分页代码如下所示: <script> //装变量的容器,可以使用多个分页器 var dataObj = { page_enterprise : 1,page_order : 选择每页显示的数据条数 limit_enterprise: 10203040 } function pageQuery(pageno,companyCode) { data { "pageno : pageno,1)">pagesize : dataObj.limit_enterprise,1)">companyCode:companyCode } $.ajax({ url :ZL.url.api.getTodayOrderInfo,type : GET'json(result){ 获取后台datas数据 apps result.page.datas; 获取数据总数 dataLengthresult.page.totalsize; rows = ""; $.each(apps,1)">(i,app){ /** * 0 处理中 * 1 成功 * 2 失败 * 3 取消 * 4 失效 * 5 待支付 */ 状态 statusapp.orderStatus; 备注 remarkapp.remark; if(status==0){ status处理中; }else 成功2失败3取消4失效5待支付; } (remarknull||remark){ remark; } rows + <tr>; rowsrows +<td>status; rowsapp.createTimeapp.orderResources[].resourceIdapp.orderGuest[].nameapp.totalAmount; rows </tr>; }); $(#appAccount_list).html(rows); 调用分页 layui.use([laypagelayer],1)">() { laypage layui.laypage,layer layui.layer; laypage.render({ elem: enterpriSEOrder首页尾页countprevpagenextlimitskip#00A0E9(obj,first){ (!first) { 第一次不执行,一定要记住,这个必须有,要不然就是死循环 curr obj.curr; 更改存储变量容器中的数据,是之随之更新数据 dataObj.page_enterprise obj.curr; dataObj.limit_enterprise obj.limit; 回调该展示数据的方法,数据展示 pageQuery(curr,companyCode); } } }); }); },error:(XMLHttpRequest,textStatus,errorThrown){ alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); } </> 我将其放在</body>上面。之所以没有将其放入一个单独的js文件，是因为放置单独的js文件，会导致报错。这个错误我目前还没有找到原因，不过通过将其放入</body>前面和引入js文件是一样的效果，只是js 文件方便管理和修改。 ? 对应的Controller代码如下: /**
* 获取当天订单数据
* @param request
* @return
*/
@GetMapping(value="getTodayOrderInfo",produces="application/json;charset=utf-8")
@ApiOperation(value="获取当天订单数据",httpMethod="GET",notes="获取当天订单数据")
public JSONObject getTodayOrderInfo(HttpServletRequest request) {
JSONObject json = new JSONObject();
//公司编码
String companyCode = request.getParameter("companyCode");
//获取前台当前页
String currentPage = request.getParameter("pageno");
//获取前台每页显示数据
String pageSize = request.getParameter("pagesize");
//获取当前时间
String today= DateUtil.today();
//将前台通过request获取的currentPage参数转为Integer类型
Integer pageno = Integer.parseInt(currentPage.trim());
//将前台通过request获取的pageSize参数转为Integer类型
Integer pagesize = Integer.parseInt(pageSize.trim());
//将条件放入Map中
Map<String,Object> conditionMap = new HashMap<String,Object>();
conditionMap.put("companyCode",companyCode);
conditionMap.put("createTime",today);
conditionMap.put("start",(pageno-1)*pagesize);
conditionMap.put("size",pagesize);
//调用获取今日订单数据集合方法
List<FinanceOrder> list = financeOrderService.getTodayOrderInfo(conditionMap);
//获取今日订单数据总数
int count = financeOrderService.getTodayOrderCount(conditionMap);
//总页数计算 初始化为0
int totalPageCount = 0;
if ( count % pagesize == 0 ) {
totalPageCount = count / pagesize;
} else {
totalPageCount = count / pagesize + 1;
}
//判断集合数据是否为空
if(list.size()!=0) {
Page<FinanceOrder> page = new Page<FinanceOrder>();
page.setDatas(list);
page.setTotalno(totalPageCount);
page.setTotalsize(count);
json.put("returnMsg","获取今日订单数据");
json.put("page",page);
json.put("returnCode","000000");
}else {
json.put("returnMsg","暂无数据");
json.put("returnCode","222221");
}
return json;
}
? Page类代码如下: import java.util.List; /** * 分页对象 * */ public class PageT> { //数据 private List datas; //总条数 private int totalsize; //页码 private int pageno; //每页条数 private int pagesize; //总页码 private int totalno; public List getDatas() { return datas; } public void setDatas(List datas) { this.datas = datas; } public int getTotalsize() { return totalsize; } public void setTotalsize(int totalsize) { this.totalsize = totalsize; } public int getPageno() { return pageno; } public void setPageno(int pageno) { this.pageno = pageno; } public int getPagesize() { return pagesize; } public void setPagesize(int pagesize) { this.pagesize = pagesize; } public int getTotalno() { return totalno; } public void setTotalno(int totalno) { this.totalno = totalno; } @Override public String toString() { return "Page [datas=" + datas + ",totalsize=" + totalsize + ",pageno=" + pageno + ",pagesize=" + pagesize + ",totalno=" + totalno + ",getDatas()=" + getDatas() + ",getTotalsize()=" + getTotalsize() + ",getPageno()=" + getPageno() + ",getPagesize()=" + getPagesize() + ",getTotalno()=" + getTotalno() + ",getClass()=" + getClass() + ",hashCode()=" + hashCode() + ",toString()=" + super.toString() + "]"; } } ? 关于我为什么要用GET获取数据最大的原因是？ 增删改，对于数据库通常是有操作的，既然是操作的话，我必须确保操作的安全性，使用POST是最好的，因为地址栏不会显示对应的参数，和浏览器不会缓存。 而Get相反，如果用GET的话，对于增删改，浏览器会有记录，同时也会在地址栏上显示。不利于安全。 这里的安全是非修改信息。 像增删改对于数据库而言是修改数据。 而查只是获取数据，丝毫不影响数据一致性和完整性。 而且Get请求是可以缓存的，既然不影响数据的完整性和一致性，我通过GET请求获取数据，浏览器可以缓存，这样的话，确保用户体验和减轻服务器压力，何尝不好呢。 关于POST和GET，我建议大家可以参考这篇博客:https://www.cnblogs.com/williamjie/p/9099940.html 该博文对于GET和POST讲的比较详细可以作为参考。 ? 另外关于上述的JSONObject，并不想引入阿里巴巴的，而是一个比较著名的开源项目Hutool。 这个项目的特点是，将Java开发常用的工具类整理并优化为一个maven依赖，这样大家要用到它时，只需引入该依赖，就可以利用其封装的工具类加快开发进度，提高效率。 Wiki地址:http://hutool.mydoc.io/ 这里主要是讲工具类使用详情，需要用到的朋友们，可以作为参考。 码云开源地址为:https://gitee.com/loolly/hutool 该项目应用到很多开源项目和一些知名企业。包括我现在公司也在用这个，很久之前开发习惯，一项将常用工具类放入自己某个项目中，需要是直接复制过来，甚至有的时候还需要重写。 自从有了hutool,很少重写，当然了，也不能光用，也要知道它的原理，因为它是开源的，所以我们可以深入的了解它的实现原理。 ? （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |