zoukankan      html  css  js  c++  java
  • 最易懂的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,很少重写,当然了,也不能光用,也要知道它的原理,因为它是开源的,所以我们可以深入的了解它的实现原理。

  • 相关阅读:
    使用 yo 命令行向导给 SAP UI5 应用添加一个新的视图
    SAP Fiori Elements 应用的 manifest.json 文件运行时如何被解析的
    SAP UI5 标准应用的多语言支持
    微软 Excel 365 里如何设置下拉菜单和自动高亮成指定颜色
    SAP Fiori Elements 应用里的 Title 显示的内容是从哪里来的
    本地开发好的 SAP Fiori Elements 应用,如何部署到 ABAP 服务器上?
    如何在 Cypress 测试代码中屏蔽(Suppress)来自应用代码报出的错误消息
    教你一招:让集群慢节点无处可藏
    应用架构步入“无服务器”时代 Serverless技术迎来新发展
    MySQL数据库事务隔离性的实现
  • 原文地址:https://www.cnblogs.com/youcong/p/9296424.html
Copyright © 2011-2022 走看看