最易懂的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代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/**
 * 获取当天订单数据
 * @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,很少重写，当然了，也不能光用，也要知道它的原理，因为它是开源的，所以我们可以深入的了解它的实现原理。

 

posted @   挑战者V  阅读(22115)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
AI IDE Trae