最易懂的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分页部分,我在这里附上地址 ...
随机推荐
- WinForm窗体多线程操作实例
最近在学习C# 多线程相关知识,这块一直比较薄弱,在网上查了一下资料,学习了一下前辈们的经验,小弟自己也比葫芦画瓢的写了一个,自学一下. 代码如下 using System; using System ...
- animation 秒简单笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css清除浮动之天龙8步
1.父级div定义height. 2.结尾处加空div标签clear:both. 3.父级div定义伪类:after和zoom. 4.父级div定义overflow:hidden. 5.父级div定义 ...
- 《深入浅出WPF》读书笔记
依赖属性: 节省实例对内存的开销: 属性值可以通过Binding依赖到其他对象上. WPF中,依赖对象的概念被DependencyObject类实现,依赖属性被DependencyProperty类实 ...
- mac上显示.开头的文件
第一种方法是在finder中按下command+shift+.键. 第二种方法是在命令行输入如下命令 defaults write com.apple.Finder AppleShowAllFiles ...
- 【转】证书的应用之一 —— TCP&SSL通信实例及协议分析(下）
原文链接 前面两部分分别讲解了如何在.net程序中使用SSL实现安全通信以及SSL的通信过程,并通过抓包工具具体分析了ssl的握手过程,本文通过一个demo来模拟ssl协议,在TCP之上实现自己的安全 ...
- 《Think in JAVA》之每日一读(initianlize)——2013/11/12、13
了解包括继承在内的初始化全过程,以对所发生的的一切有一个全局的把握,是很有益的. 请看下例: package initialize; class Insect { private int i = 9; ...
- docker的网络基础配置
一.端口映射实现访问容器 当容器中运行一些网络应用,要让外部访问这些应用时,可以通过-P或-p参数来指定端口映射.当使用-P标记时,Docker会随机映射一个49000~49900的端口至容器内部开放 ...
- Vue2学习笔记:v-show指令
v-show指令:v-show="true/false" 控制元素显示/隐藏 1.使用 <!DOCTYPE html> <html> <head> ...
- [UI] 精美UI界面欣赏[3]
精美UI界面欣赏[3]