最易懂的layui分页
该篇文章是在layui前端框架之分页基础上简洁化和详细化。
首先该示例采用的是Spring+MyBatis Plus+SpringMVC(常规的SSM框架),持久层换成MyBatis也行。
至于layui,官网为:http://www.layui.com/
所有的文档和相关示例都可以在里面找到，layui是一个开源的前端框架，主要是由一位叫贤心的人在维护。
该框架，在码云或者github相关项目应用比较广，几乎很多开源项目直接或者间接的采用它。
比如jeesite等。当然我公司项目也采用它，主要是它的弹出层和分页做的挺不错的。而且很多组件对于用户体验也是很不错的。
下面进入示例:
需要引入的简单的说，只要将下列三个引入即可
<link rel="stylesheet" href="layui/css/layui.css">
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
至于放置位置可以，如果是示例工程的话，可以全部放在<head></head>之中，建议先示例工程确认没问题，再用于生产工程。
生产工程还是老规矩，css文件放置<head</head>之中，js放在<body>结束标签的前面。以引用的jQuery库为最上，之所以最上，是因为引用的js文件有一部分是自己编写的，而且该文件里面用到jQuery，如果放在引用jQuery函数的下面，就会导致jQuery函数不能用，从而导致不能显示对应的效果。
layui分页代码如下所示:
<script> //装变量的容器,可以使用多个分页器 var dataObj = { page_enterprise : 1, page_order : 1, page_log: 1, page_log_info: 1, //选择每页显示的数据条数 limit_enterprise: 10, limit_order: 20, limit_log: 30, limit_log_info: 40 } function pageQuery(pageno,companyCode) { var data = { "pageno" : pageno, "pagesize" : dataObj.limit_enterprise, "companyCode":companyCode } $.ajax({ url :ZL.url.api.getTodayOrderInfo, type : "GET", data : data, dataType : 'json', success : function(result){ //获取后台datas数据 var apps = result.page.datas; //获取数据总数 var dataLength=result.page.totalsize; var rows = ""; $.each(apps, function(i, app){ /** * 0 处理中 * 1 成功 * 2 失败 * 3 取消 * 4 失效 * 5 待支付 */ //状态 var status=app.orderStatus; //备注 var remark=app.remark; if(status=="0"){ status="处理中"; }else if(status=="1"){ status="成功"; }else if(status=="2"){ status="失败"; }else if(status=="3"){ status="取消"; }else if(status=="4"){ status="失效"; }else if(status=="5"){ status="待支付"; } if(remark==null||remark==""){ remark=""; } rows = rows + '<tr>'; rows=rows +"<td>"+status+""; rows=rows +"<td>"+app.createTime+""; rows=rows +"<td>"+app.orderResources[0].resourceId+""; rows=rows +"<td>"+app.orderGuest[0].name+""; rows=rows +"<td>"+app.totalAmount+""; rows=rows +"<td>"+remark+""; rows = rows + '</tr>'; }); $("#appAccount_list").html(rows); //调用分页 layui.use(['laypage', 'layer'], function() { var laypage = layui.laypage, layer = layui.layer; laypage.render({ elem: 'enterpriseOrder', count: dataLength, limit: dataObj.limit_enterprise, first: '首页', last: '尾页', layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], curr: dataObj.page_enterprise, theme: '#00A0E9', jump:function(obj,first){ if(!first) { //第一次不执行,一定要记住,这个必须有,要不然就是死循环 var curr = obj.curr; //更改存储变量容器中的数据,是之随之更新数据 dataObj.page_enterprise = obj.curr; dataObj.limit_enterprise= obj.limit; //回调该展示数据的方法,数据展示 pageQuery(curr,companyCode); } } }); }); },error:function(XMLHttpRequest, textStatus, errorThrown){ alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); } </script>
我将其放在</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", "111111");
}
return json;
}
Page类代码如下:
import java.util.List; /** * 分页对象 * */ public class Page<T> { //数据 private List<T> datas; //总条数 private int totalsize; //页码 private int pageno; //每页条数 private int pagesize; //总页码 private int totalno; public List<T> getDatas() { return datas; } public void setDatas(List<T> 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,很少重写，当然了，也不能光用，也要知道它的原理，因为它是开源的，所以我们可以深入的了解它的实现原理。
