最易懂的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分页部分,我在这里附上地址 ...
随机推荐
- vue+element ui 的tab 动态增减，切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- Qt程序Release版出现 类似 QEventLoop: Cannot be used without QApplication 问题的终极解决方案
最近在做Qt程序开发,程序在Debug下跑是没有问题的,发布到Release版本后,出现各种问题: 报各种莫名其妙的错误,类似的错误有: QEventLoop:Cannot be used wit ...
- 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭
一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- content-box与border-box区别
理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型. 正常盒模型 正常盒模型,是指块元素box-sizing属性为content-box的盒模 ...
- CSS选择器之伪类选择器（元素）
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- Arcengine编辑代码
using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...
- AWK与SED命令
linux系统比较常用的AWK与SED命令,这两个命令主要是格式化文本文件信息.接下来将详细介绍这两个命令的基本用法以及可以实现的功能. 一.AWK命令 AWK语言的基本功能是在文件或者字符串中基于指 ...
- MySQL Bug导致异常宕机的分析流程
原文链接:http://click.aliyun.com/m/42521/ 摘要: 本文主要通过一个bug来记录一下如何分析一个MySQL bug的崩溃信息. 版本:Percona 5.7.17-11 ...
- Flask配置文件和 路由系统
debug = True开启debug模式 当你的代码在界面增减之后不用刷新界面自动更新 app.logger.error("这是error模式") app.logger.info ...