最易懂的layui分页

简介: 该篇文章是在layui前端框架之分页基础上简洁化和详细化。首先该示例采用的是Spring+MyBatis Plus+SpringMVC(常规的SSM框架),持久层换成MyBatis也行。至于layui,官网为:http://www.layui.com/所有的文档和相关示例都可以在里面找到,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,很少重写,当然了,也不能光用,也要知道它的原理,因为它是开源的,所以我们可以深入的了解它的实现原理。

 

目录
相关文章
|
8月前
|
前端开发 JavaScript 数据库
layui入门增删改查
layui入门增删改查
29 0
|
9月前
|
存储 前端开发 数据挖掘
前端框架Layui实现动态表格效果用户管理实例(对表格进行CRUD操作-附源码)(一)
前端框架Layui实现动态表格效果用户管理实例(对表格进行CRUD操作-附源码)
132 0
|
9月前
|
开发框架 前端开发 JavaScript
前端框架Layui的使用讲解(Layui搭建登录注册页面)(一)
前端框架Layui的使用讲解(Layui搭建登录注册页面)
503 0
|
6月前
|
JavaScript
Layui之选项卡案例 详细易懂
Layui之选项卡案例 详细易懂
|
6月前
|
JavaScript 前端开发 数据库
ElementUI之动态树及书籍的分页查询
ElementUI之动态树及书籍的分页查询
|
9月前
|
SQL JavaScript Java
Layui基本功能快速上手(增删改查)
R工具类可以更好的进行代码的优化。
|
9月前
|
JSON 前端开发 Java
前端框架Layui实现动态表格效果用户管理实例(对表格进行CRUD操作-附源码)(二)
前端框架Layui实现动态表格效果用户管理实例(对表格进行CRUD操作-附源码)(二)
79 0
|
9月前
|
XML 前端开发 Java
前端框架Layui的使用讲解(Layui搭建登录注册页面)(二)
前端框架Layui的使用讲解(Layui搭建登录注册页面)(二)
92 0
|
11月前
|
JavaScript 容器
layui框架实战案例(9):layPage 静态数据分页组件
layui框架实战案例(9):layPage 静态数据分页组件
216 0
|
11月前
|
前端开发 JavaScript 数据库
layui框架实战案例(12):layui标签输入框inputTag
layui框架实战案例(12):layui标签输入框inputTag
583 0
layui框架实战案例(12):layui标签输入框inputTag