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

最易懂的layui分页的更多相关文章

  1. LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  2. springBoot mybatis mysql pagehelper layui 分页

    <!-- 加入 pagehelper 分页插件 jar包--><dependency> <groupId>com.github.pagehelper</gro ...

  3. 二十九、layui分页插件的使用

    <div id="page1"></div> <script> //开启分页 var page = 1; function findstoreL ...

  4. tp5 设置layui分页

    \thinkphp\library\think\paginator\driver 添加 Layui.php <?php namespace think\paginator\driver; use ...

  5. SSM项目layui分页实例

    最近学了layui,发现其中的分页挺有意思的,所以整理了一下,一遍自己随时查看.(官方文档上已经很详细了,当中有不足的地方欢迎大家指出) 关于前台的js文件,css样式,js样式,大家可以到官网下 本 ...

  6. 基于MVC框架layui分页控件实现前端分页信息写法

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak@{ ViewBag.Title = ...

  7. layui分页

    毕业已经两年,期间经历了很多.一个人欢笑与哭泣,在墙角.在路边.在床上.每天搭乘首班车来到公司,每天无数次反省自己,每天每天再问自己为什么活着. 一.下载并引用css和js 地址:点我 <lin ...

  8. js layui 分页脚本

    //分页 layui.use(['laypage'], function(){ var laypage = layui.laypage; laypage.render({ elem: 'page' , ...

  9. LayUI分页基于ASP.NET MVC

    ---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...

随机推荐

  1. Android - fragment之间数据传递

    <Fragment跳转时传递参数及结果回传的方法> <Fragment详解之五——Fragment间参数传递> <Android解惑 - 为什么要用Fragment.se ...

  2. java设计模式-----18、职责链模式

    概念: Chain of Responsibility(CoR)模式也叫职责链模式.责任链模式或者职责连锁模式,是行为模式之一,该模式构造一系列分别担当不同的职责的类的对象来共同完成一个任务,这些类的 ...

  3. mysql安装配置、主从复制配置详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8213723.html 邮箱:moyi@moyib ...

  4. wcf和webapi(转)

    WCF 1.这个也是基于SOAP的,数据格式是XML 2.这个是Web Service(ASMX)的进化版,可以支持各种各样的协议,像TCP,HTTP,HTTPS,Named Pipes, MSMQ. ...

  5. 小tip:CSS3下的渐变文字效果实现——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...

  6. AGC009:Eternal Average

    传送门 好神啊 直接考虑一棵 \(n+m\) 个叶子的 \(k\) 叉树,根结点权值为 \(\sum_{i\in m}(\frac{1}{k})^{deep_i}\) 对于一个 \(deep\) 的序 ...

  7. html active属性

    源代码 <div class="col-md-3"> <div class="list-group"> <a href=" ...

  8. PopupWindow 的常用api封装

    对PopupWindow常用API的简单封装,几行代码就搞定PopupWindow弹窗,使用Builder模式,链式调用,像使用AlertDialog 一样 封装通用PopupWindow,Custo ...

  9. 生成项目目录结构(based on windows system)

    描述: 作为程序员,在工作中,我们经常会有需求,需要罗列出项目的结构图:如果手工来整理的话,太过浪费时间,其实我们可以借助tree命令来快速生成目录结构. 本文主要介绍一下,基于windows系统,如 ...

  10. 大数据量报表APPLET打印分页传输方案

     1 . 问题概述 当报表运算完成时,客户端经常需要调用润乾自带的runqianReport4Applet.jar来完成打印操作, 然而数据量比较大的时候,会导致无法加载完成,直至applet内存 ...