该篇文章是在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);//总页数计算 初始化为0int 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;}@Overridepublic 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,很少重写,当然了,也不能光用,也要知道它的原理,因为它是开源的,所以我们可以深入的了解它的实现原理。

转载于:https://www.cnblogs.com/youcong/p/9296424.html

最易懂的layui分页相关推荐

  1. java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例

    本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖 主要是jquery-1.11. ...

  2. layui分页和模板引擎

    模板引擎 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  3. layui分页功能在vue写的H5中实现

    layui分页原文档:https://www.layui.site/doc/modules/laypage.html 文档介绍的比较简单,实际用起来我走了很多弯路: 1.count总数从接口返回,需要 ...

  4. layui分页页码消失

    layui分页传值到后台,下方分页栏消失 通过layui的分页完成后,想要再完成搜索的分页,但是在向后台传递页码时附带搜索框内容,会发现分页下方页面消失了.后来才发现是搜索框内的值获取问题. 后台代码 ...

  5. layui分页数据表格渲染

    最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来 先说前端HTML和js代码 <script src= ...

  6. laravel+layui分页

    前端部分 <div class="layui-card-body"><form class="layui-form"><table ...

  7. 【分页】超详细Spring+layUI分页实现过程

    对于分页,相信做过开发的朋友都比较熟悉的,但每个插件提供的方式和功能略有不同之处,下面给大家分享一下我在做项目中遇到的关于layUI分页的一点知识,仅供参考学习 首先看一下效果图(layUI分页自带导 ...

  8. layui分页按钮失效解决办法

    layui分页按钮失效解决办法 问题:分页条数没问题,但是无论点击分页按钮第一页还是第二页或者第N页,都是一次性把所有结果集返回,没有实现我们的效果 想要的结果是点击下方的分页按钮,表格能显示成上面的 ...

  9. java实现layui分页,MVC下实现LayUI分页的Demo

    1.后台获取数据示例 public JsonResult GetPageNew(int page,int pagesize) { var list = _context.ArticleInfo.Ski ...

最新文章

  1. Ubuntu 12.04下PostgreSQL-9.1安装与配置详解(在线安装)
  2. C++五子棋(二)——游戏界面与棋子渲染
  3. 视频和视频帧:FFMPEG 硬件解码API介绍
  4. maven构建可执行jar包
  5. Java-WAS的Hello world
  6. pp2使用需要java_新GRE模考软件POWERPREP2安装和使用说明(图解)
  7. C++算法学习(力扣:402. 移掉K位数字)
  8. React 进修之路(1)
  9. iOS资源大全中文版
  10. Ifconfig网络配置工具详解(from fixdown.com)
  11. 东软实训告诉你:职场上不该说的13种话
  12. 南京大学全国计算机考试时间,2019南京大学自主招生考试时间及科目
  13. GoLang之什么是workstealing(5)
  14. 输入五个国家的名称按字母顺序排列输出
  15. IOl流的分类与使用
  16. pageX,clientX,offsetLeft,scrollLeft的区别
  17. 计算机三级数据库技术 第14章 数据仓库与数据挖掘
  18. localhost是什么?
  19. Styled-Components
  20. 【图像处理】图像拼接原理介绍

热门文章

  1. P5703 【深基2.例5】苹果采购(scratch实现)
  2. Validform实时表单验证插件实例使用
  3. java 1.7 hashmap源码_jdk1.7hashMap源码分析
  4. ThinkPHP6项目基操(13.实战部分 项目中的自定义异常处理总结 错误页面API错误)
  5. iOS 移动端overflow:auto 滚动不平滑及bug处理
  6. 基于java的络教学平台的设计与实现 (含源文件)
  7. ubuntu c++检测usb口事件变化_炼就“火眼金睛”,FETA40i-C核心板“牵手”光时域反射仪...
  8. Qt5\MinGw编译器快速解决-QMYSQL driver not loaded问题
  9. WEB安全基础-CSRF漏洞
  10. 初一上册计算机教案,人教版七年级上册信息技术教学计划