最易懂的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,很少重写，当然了，也不能光用，也要知道它的原理，因为它是开源的，所以我们可以深入的了解它的实现原理。
最易懂的layui分页的更多相关文章
- LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- springBoot mybatis mysql pagehelper layui 分页
<!-- 加入 pagehelper 分页插件 jar包--><dependency> <groupId>com.github.pagehelper</gro ...
- 二十九、layui分页插件的使用
<div id="page1"></div> <script> //开启分页 var page = 1; function findstoreL ...
- tp5 设置layui分页
\thinkphp\library\think\paginator\driver 添加 Layui.php <?php namespace think\paginator\driver; use ...
- SSM项目layui分页实例
最近学了layui,发现其中的分页挺有意思的,所以整理了一下,一遍自己随时查看.(官方文档上已经很详细了,当中有不足的地方欢迎大家指出) 关于前台的js文件,css样式,js样式,大家可以到官网下 本 ...
- 基于MVC框架layui分页控件实现前端分页信息写法
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak@{ ViewBag.Title = ...
- layui分页
毕业已经两年,期间经历了很多.一个人欢笑与哭泣,在墙角.在路边.在床上.每天搭乘首班车来到公司,每天无数次反省自己,每天每天再问自己为什么活着. 一.下载并引用css和js 地址:点我 <lin ...
- js layui 分页脚本
//分页 layui.use(['laypage'], function(){ var laypage = layui.laypage; laypage.render({ elem: 'page' , ...
- LayUI分页基于ASP.NET MVC
---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...
随机推荐
- 实习小结（四）--- MyBatis Generator使用
第一次听闻MyBatis Generator插件很是惊讶,已经有这么便捷方式的工具通过数据库表来自动生成实体类,映射文件,接口以及帮助类,而且可以通过自己写方法来增加中文注释,遂来学习一波.首先先建一 ...
- db2存储过程迁移
一.导出存储过程 EXPORT TO D:/PROCUDURE/procudure.del OF del MODIFIED BY LOBSINFILE SELECT 'SET CURRENT SCHE ...
- Implementation：Bellman-ford
单源最短路径算法Bellman-ford练习,可以处理有负边的情况(也可以在存在负圈时及时终止) #include <iostream> #include <cstdlib> ...
- bootstrap前端框架使用总结分享
1.bootstrap 排版 全局样式style.css: 1.移除body的margin声明 2.设置body的背景色为白色 3.为排版设置了基本的字体.字号和行高 4.设置全局链接颜色,且当链接处 ...
- opencv3.2.0形态学滤波之形态学梯度、顶帽、黑帽
/*一.形态学梯度 (1)含义:是膨胀图和腐蚀图之差 (2)数学表达式:dst=morph-grad(src,element) =dilate(src,element) - erode(src,ele ...
- Ｕbuntu下编译opencv 和Ubuntu使用ffmpeg实现音频、视频的抽取
一.使用Ubuntu编译opencv (前提是Ubuntu内已经正确配置了opencv,个人采用opencv3.2) g++ 1.cpp -o 1 `pkg-config --cflags --lib ...
- react 中使用定时器 Timers(定时器)
setTimeout,clearTmeout setInterval,clearInterval 在 class 中 class TimersDemo extends Component { cons ...
- Android 开发中三种多线程
在开发工程中线程可以帮助我们提高运行速度,Android开发中我知道的线程有四个一个是老生长谈的Thread,第二个是asyncTask,第三个:TimetTask,第四个是Looper,四个多线程各 ...
- idapython 开发
调试方法 使用 pydevd 然后在需要调试处加入调试代码 GetOperandValue 作用 参数1: ea 虚拟地址 参数2: 操作数号 返回指令的操作数的被解析过的值 文档 def GetOp ...
- [转载]敏感词过滤，PHP实现的Trie树
原文地址:http://blog.11034.org/2012-07/trie_in_php.html 项目需求,要做敏感词过滤,对于敏感词本身就是一个CRUD的模块很简单,比较麻烦的就是对各种输入的 ...