该篇文章是在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,很少重写，当然了，也不能光用，也要知道它的原理，因为它是开源的，所以我们可以深入的了解它的实现原理。