精华内容
下载资源
问答
  • layui分页

    2017-11-10 16:46:15
    注意 使用的layui版本为:layui-v...如果layui分页有的时候可以渲染,有的时候不能渲染,请看我的另外一篇博文:layui分页有的时候无法正常渲染解决方案 这几天在工作当中需要使用分页控件,然后研究了一下layui

    注意

    使用的layui版本为:layui-v1.0.9,现在新版本已经2.X了有些属性改变了,如果你的版本是2.0以上请参照我的博客:《 layui完美分页,ajax请求分页(真分页) 【2.0版本】》

    如果layui分页有的时候可以渲染,有的时候不能渲染,请看我的另外一篇博文:layui分页有的时候无法正常渲染解决方案

    这几天在工作当中需要使用分页控件,然后研究了一下layui的分页控件,这个控件页面非常简洁,功能齐全,而且可以通过异步进行数据的分页,如果大家遇到什么问题可以联系我 email:1085143002@qq.com

    完整代码:

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link  rel="icon" href="static/images/titleLogo.png"  />
        <title>门店管理后台</title>
        <link rel="stylesheet" href="static/layui/plugins/layui/css/layui.css" media="all" />
        <!-- <link rel="stylesheet" type="text/css" href="static/css/reset.css">
        <link rel="stylesheet" type="text/css" href="static/css/commend.css"> -->
        <!-- <link rel="stylesheet" href="static/css/jqpagination.css" /> -->
        <!-- <link rel="stylesheet" type="text/css" href="static/css/shopCustomerManager.css"> -->
        <script type="text/javascript" src="static/js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="static/layui/plugins/layui/layui.js"></script>
        <!-- <script type="text/javascript" src="static/js/jquery.jqpagination.js"></script> -->
        <script type="text/javascript">
            $(document).ready(function(){
                  //ajax请求后台数据
                  getShopCustomerManagePageInfo();
    
    
                  //点击搜索时 搜索数据
                  $("#selectButton").click(function(){ 
                    getShopCustomerManagePageInfo();
                    currentPageAllAppoint = 1; //当点击搜索的时候,应该回到第一页
                    toPage();//然后进行分页的初始化
    
                  })
               toPage();
            });
    
            //分页参数设置 这些全局变量关系到分页的功能
            var startAllAppoint = 0;
            var limitAllAppoint = 10;
            var currentPageAllAppoint = 1;
            var totalPageAllAppoint = 0;
            var dataLength = 0;
            //ajax请求后台数据
            function getShopCustomerManagePageInfo(){
                $.ajax({
                    type:"post",
                    async:false,
                    url:"list_shop_customers_info",
                    data:{start:startAllAppoint, limit:limitAllAppoint,selectValue:$("#selectValue").val()},
                    success:function(data,status){
                        data=eval("("+data+")");
                        getShopCustomesInfo(data.root);
                        startAllAppoint = data.currentResult;//当前页数(后台返回)
                        totalPageAllAppoint = data.totalPage;//总页数(后台返回)
    
                    }
                });
    
            }
    
    
    
            function getShopCustomesInfo(data){
                var s = "<tr><th>姓名</th><th>性别</th><th>电话</th><th>备案楼盘</th><th>已成交</th><th>归属经纪人</th><th>添加时间</th></tr>";
                $.each(data,function(v,o){
                        s+='<tr><td>'+o.cusName+'</td>';
                        s+='<td>'+o.cusSex+'</td>';
                        s+='<td>'+o.phone+'</td>';
                        s+='<td>'+o.records+'</td>';
                        s+='<td>'+o.alreadyDeal+'</td>';
                        s+='<td>'+o.theMedi+'</td>';
                        s+='<td>'+o.addTime+'</td></tr>';
                });
    
                if(data.length>0){
                    $("#t_customerInfo").html(s);
                }else{
                    $("#page1").hide();
                    $("#t_customerInfo").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
                }
    
    
            }
    
    
    
            function toPage(){
    
                layui.use(['form', 'laypage', 'layedit','layer', 'laydate'], function() {
                    var form = layui.form(),
                        layer = layui.layer,
                        layedit = layui.layedit,
                        laydate = layui.laydate,
                        laypage = layui.laypage;
    
                    var nums = 10;
                    //调用分页
                      laypage({
                        cont: 'paged'
                        ,pages: totalPageAllAppoint //得到总页数,在layui2.X中使用count替代了,并且不是使用"总页数",而是"总记录条数"
                        ,curr: currentPageAllAppoint
                        ,skip: true
                        ,jump: function(obj, first){
    
                            currentPageAllAppoint = obj.curr;
                            startAllAppoint = (obj.curr-1)*limitAllAppoint;
                          //document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr);
                          if(!first){ //一定要加此判断,否则初始时会无限刷新
                          getShopCustomerManagePageInfo();//一定要把翻页的ajax请求放到这里,不然会请求两次。
                              //location.href = '?page='+obj.curr;
                            }
                        }
                      });
    
    
                });
            };
    
        </script>
    </head>
    <body>
        <div class="admin-main">
    
    
                    <blockquote class="layui-elem-quote">
                    <form class="layui-form" action="" >
                    <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" id="selectValue" lay-verify="required" placeholder="客户姓名,电话" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn" type="button" id="selectButton">搜索</button>
                    </div>
                    </form>
                    <span><a href="shop_customer_manager_page_info">显示所有客户</a></span>
                    </blockquote>
                    <fieldset class="layui-elem-field">
                        <legend>客户列表</legend>
                        <div class="layui-field-box layui-form">
                            <table class="layui-table admin-table" id="t_customerInfo">
    
                            </table>
                        </div>
                    </fieldset>
                    <div class="admin-table-page">
                        <div id="paged" class="page">
                        </div>
                    </div>
                </div>
    
    
    </body>
    </html>
    • 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
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153

    java代码:

    /**java
         * shop 客户管理 list
         * @param start
         * @param limit
         * @param selectValue
         */
        @ResponseBody
        @RequestMapping("/list_shop_customers_info")
        public Object listShopCustomerInfo(Integer start, Integer limit, String selectValue) {
            Page page = new Page();
            page.setStart((start-1)*limit);
            page.setLimit(limit);
            // 获取session中的用户信息
            User u = (User) this.request.getSession().getAttribute("userInfo");
            // 获取持久化用户对象
            User user = userService.findById(u.getUserId());
            if (user != null) {
                projectCustomerService.findShopCustomersByUser(user, selectValue, page);
                return page;
            }
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    sevice层

    @Override
        public void findShopCustomersByUser(User user, String selectValue, Page page) {
            List cmList = new ArrayList<>();
            int total = 0;
            if(user!=null && user.getParentId()!=null && !user.getParentId().equals("")){
                String hql = "from ShopCustomers as model where model.shopId = " + Integer.parseInt(user.getParentId());
                if(selectValue!=null && !selectValue.equals("")){
                    hql+="and model.shopCustomerName like '%" +selectValue+"%' or model.shopCustomerPhone like '%" +selectValue+"%'";
                }
                List<ShopCustomers> list = baseDao.findByHql(hql,page.getStart(),page.getLimit());
                for(ShopCustomers sc : list){
                    User u = (User) baseDao.loadById(User.class, sc.getUserId());
                    String cGRSHql = "select count(*) from GuideRecords where shopCustomerId = '"+sc.getShopCustomerId()+"'";
                    String cDealHql = "select count(*) from GuideRecords where shopCustomerId = '"+sc.getShopCustomerId()+"' and isDeal = 1";
                    int floorCounts = baseDao.countQuery(cGRSHql);//备案楼盘数
                    int dealCounts = baseDao.countQuery(cDealHql);//已成交数
                    CustomerManager cm = new CustomerManager();
                    CustomerManager cmObj = cm.createCusManObj(sc,u);
                    cmObj.setRecords(floorCounts);
                    cmObj.setAlreadyDeal(dealCounts);
                    cmList.add(cmObj);
                }
                String cHql = "select count(*) "+hql;
                total = baseDao.countQuery(cHql);
            }
            page.setRoot(cmList);
            page.setTotal(total);
        }
    • 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

    分页对象

    package com.sc.tradmaster.utils;
    
    import java.util.List;
    /**
     * 分页对象
     * @author grl 2017-01-05
     *
     */
    public class Page {
        /** 总记录数 */
        private int total;
        /** 分页结果 */
        private List root;
        /** 开始页码 */
        private int start;
        /** 每页多少 */
        private int limit;
        /** 查询条件 */
        private String wheres;
    
        private int currentPage;    //当前页
        private int currentResult;  //当前记录起始索引
        private int totalPage;      //总页数
    
        public int getCurrentPage() {
            if(currentPage<=0)
                currentPage = 1;
            return currentPage;
        }
    
        public void setCurrentPage(int currentPage) {
            this.currentPage = currentPage;
        }
    
        public int getCurrentResult() {
            currentResult = (getCurrentPage()-1)*getLimit();
            if(currentResult<0)
                currentResult = 0;
            return currentResult;
        }
    
        public void setCurrentResult(int currentResult) {
            this.currentResult = currentResult;
        }
    
        public int getTotalPage() {
            if(total%limit==0)
                totalPage = total/limit;
            else
                totalPage = total/limit+1;
            return totalPage;
        }
    
        public void setTotalPage(int totalPage) {
            this.totalPage = totalPage;
        }
    
        public int getTotal() {
            return total;
        }
    
        public void setTotal(int total) {
            this.total = total;
        }
    
        public List getRoot() {
            return root;
        }
    
        public void setRoot(List root) {
            this.root = root;
        }
    
        public int getStart() {
            return start;
        }
    
        public void setStart(int start) {
            this.start = start;
        }
    
        public int getLimit() {
            return limit;
        }
    
        public void setLimit(int limit) {
            this.limit = limit;
        }
    
        public String getWheres() {
            return wheres;
        }
    
        public void setWheres(String wheres) {
            this.wheres = wheres;
        }
    
        @Override
        public String toString() {
            return start+" "+total +" " +root;
        }
    
    }
    展开全文
  • 本篇文章主要介绍了基于LayUI分页和LayUI laypage分页的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • LayUI分页,LayUI动态分页,LayUI laypage分页,LayUIlaypage刷新当前页 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ©...

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    ©Copyright 蕃薯耀 2017年8月1日

    http://www.cnblogs.com/fanshuyao/

    效果图:

     

    一、引用js依赖

    主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的

    Java代码  
    收藏代码
    1. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>  
    2. <script type="text/javascript" src="${pageContext.request.contextPath}/plugin/layui/lay/dest/layui.all.js"></script>  
    3. <script type="text/javascript" src="${pageContext.request.contextPath}/js/json2.js"></script>  

    二、js分页方法封装(分页使用模板laytpl)

    1、模板渲染

    Java代码  
    收藏代码
    1. /** 
    2.  * 分页模板的渲染方法 
    3.  * @param templateId 分页需要渲染的模板的id 
    4.  * @param resultContentId 模板渲染后显示在页面的内容的容器id 
    5.  * @param data 服务器返回的json对象 
    6.  */  
    7. function renderTemplate(templateId, resultContentId, data){  
    8.     layui.use(['form','laytpl'], function(){  
    9.         var laytpl = layui.laytpl;  
    10.         laytpl($("#"+templateId).html()).render(data, function(html){  
    11.             $("#"+resultContentId).html(html);  
    12.         });  
    13.     });  
    14.     layui.form().render();// 渲染  
    15. };  

    2、layui.laypage 分页封装

    Java代码  
    收藏代码
    1. /** 
    2.  * layui.laypage 分页封装 
    3.  * @param laypageDivId 分页控件Div层的id 
    4.  * @param pageParams 分页的参数 
    5.  * @param templateId 分页需要渲染的模板的id 
    6.  * @param resultContentId 模板渲染后显示在页面的内容的容器id 
    7.  * @param url 向服务器请求分页的url链接地址 
    8.  */  
    9. function renderPageData(laypageDivId, pageParams, templateId, resultContentId, url){  
    10.     if(isNull(pageParams)){  
    11.         pageParams = {  
    12.             pageIndex : 1,  
    13.             pageSize : 10  
    14.         }  
    15.     }  
    16.     $.ajax({  
    17.         url : url,//basePath + '/sysMenu/pageSysMenu',  
    18.         method : 'post',  
    19.         data : pageParams,//JSON.stringify(datasub)  
    20.         async : true,  
    21.         complete : function (XHR, TS){},  
    22.         error : function(XMLHttpRequest, textStatus, errorThrown) {  
    23.             if("error"==textStatus){  
    24.                 error("服务器未响应,请稍候再试");  
    25.             }else{  
    26.                 error("操作失败,textStatus="+textStatus);  
    27.             }  
    28.         },  
    29.         success : function(data) {  
    30.             var jsonObj;  
    31.             if('object' == typeof data){  
    32.                 jsonObj = data;  
    33.             }else{  
    34.                 jsonObj = JSON.parse(data);  
    35.             }  
    36.             renderTemplate(templateId, resultContentId, jsonObj);  
    37.               
    38.             //重新初始化分页插件  
    39.             layui.use(['form','laypage'], function(){  
    40.                 laypage = layui.laypage;  
    41.                 laypage({  
    42.                     cont : laypageDivId,  
    43.                     curr : jsonObj.pager.pageIndex,  
    44.                     pages : jsonObj.pager.totalPage,  
    45.                     skip : true,  
    46.                     jump: function(obj, first){//obj是一个object类型。包括了分页的所有配置信息。first一个Boolean类,检测页面是否初始加载。非常有用,可避免无限刷新。  
    47.                         pageParams.pageIndex = obj.curr;  
    48.                         pageParams.pageSize = jsonObj.pager.pageSize;  
    49.                         if(!first){  
    50.                             renderPageData(laypageDivId, pageParams, templateId, resultContentId, url);  
    51.                         }  
    52.                     }  
    53.                 });  
    54.             });  
    55.         }  
    56.     });  
    57. };  

    3、刷新当前分页的方法,可省略

    Java代码  
    收藏代码
    1. /** 
    2.  * 分页插件刷新当前页的数据,必须有跳转的确定按钮,因为根据按钮点击事件刷新 
    3.  */  
    4. function reloadCurrentPage(){  
    5.     $(".layui-laypage-btn").click();  
    6. };  

    三、页面代码

    1、分页表格及分页控件

    Java代码  
    收藏代码
    1. <!-- 分页表格 -->  
    2. <div class="layui-form">  
    3.   <table class="layui-table">  
    4.     <thead>  
    5.       <tr>  
    6.         <th class="w20"><input type="checkbox" name="checkBoxAll" lay-skin="primary" lay-filter="allChoose"></th>  
    7.      <th class="w200">许可名称</th>  
    8.      <th class="w200">许可编码</th>  
    9.      <th class="w200">菜单名称</th>  
    10.      <th>许可链接</th>  
    11.     </tr>   
    12.      </thead>  
    13.       <tbody id="page_template_body_id">  
    14.     </tbody>  
    15.   </table>  
    16. </div>  
    17. <!-- 分页控件div -->        
    18. <div id="imovie-page-div"></div>  

    2、分页模板

    Java代码  
    收藏代码
    1. <script id="page_template_id" type="text/html">  
    2. {{#  layui.each(d.list, function(index, item){ }}  
    3. <tr>  
    4.     <td><input type="checkbox" name="permissionId" lay-skin="primary" value="{{item.permissionId}}"></td>  
    5.     <td>{{item.permissionName || ''}}</td>  
    6.     <td>{{item.permissionCode || ''}}</td>  
    7.     <td>{{item.menuName || ''}}</td>  
    8.     <td>{{item.permissionUrl || ''}}</td>  
    9. </tr>  
    10. {{#  }); }}  
    11. </script>  

    3、分页执行代码:

    分页参数:

    Java代码  
    收藏代码
    1. function getPageParams(){  
    2.     var pageParams = {  
    3.     pageIndex : 1,  
    4.     pageSize : 2  
    5.     };  
    6.     pageParams.permissionName = $("input[name='permissionName']").val();  
    7.     pageParams.permissionCode = $("input[name='permissionCode']").val();  
    8.     pageParams.menuName = $("input[name='menuName']").val();  
    9.     return pageParams;  
    10. };  

    分页执行方法:

    Java代码  
    收藏代码
    1. function initPage(){  
    2.     renderPageData("imovie-page-div", getPageParams(), "page_template_id",   
    3.             "page_template_body_id", basePath + '/sysPermission/pageSysPermission');  
    4. };  

    页面加载初始化分页:

    Java代码  
    收藏代码
    1. $(function(){  
    2.     initPage();  
    3. });  

    如果包括上面效果图的查询,如下:

    Html页面代码

    Java代码  
    收藏代码
    1. <div>  
    2.             <form class="layui-form layui-form-pane">  
    3.                 <div class="layui-form-item">  
    4.                     <div class="layui-inline">  
    5.                         <label class="layui-form-label">许可名称</label>  
    6.                         <div class="layui-input-inline">  
    7.                             <input type="text" name="permissionName"   
    8.                                 autocomplete="off" class="layui-input" placeholder="请输入许可名称" >  
    9.                         </div>  
    10.                     </div>  
    11.                     <div class="layui-inline">  
    12.                         <label class="layui-form-label">许可编码</label>  
    13.                         <div class="layui-input-inline">  
    14.                             <input type="text" name="permissionCode"   
    15.                                 autocomplete="off" placeholder="请输入许可编码" class="layui-input">  
    16.                         </div>  
    17.                     </div>  
    18.                     <div class="layui-inline">  
    19.                         <label class="layui-form-label">菜单名称</label>  
    20.                         <div class="layui-input-inline layui-input-inline-0">  
    21.                             <input type="text" name="menuName"   
    22.                                 autocomplete="off" placeholder="请选择菜单名称" class="layui-input">  
    23.                               
    24.                         </div>  
    25.                     </div>  
    26.                     <div class="layui-inline">  
    27.                         <button id="btnSubmit" class="layui-btn" lay-submit="" lay-filter="formFilter">查询</button>  
    28.                     </div>  
    29.                 </div>  
    30.             </form>  
    31.         </div>  

    查询语句:

    Java代码  
    收藏代码
    1. $(function(){  
    2.     initPage();  
    3.       
    4.     layui.use(['form'], function(){  
    5.         var form = layui.form();  
    6.         //监听提交  
    7.         form.on('submit(formFilter)', function(data){  
    8.             initPage();  
    9.             return false;  
    10.         });  
    11.             
    12.             
    13.     });  
    14. });  

    四、懂 jquery 插件封装的大神可以将其封装成独立的分页插件,这样更加容易使用。我表示不太懂,^_^

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    ©Copyright 蕃薯耀 2017年8月1日

    http://www.cnblogs.com/fanshuyao/

    展开全文
  • layui 分页

    2020-05-19 11:03:34
    //分页 layui.laypage.render({ elem : 'pageInfo', count : ${query.rsCount}, limit: ${query.pageSize}, curr: ${query.currentPage}, theme : '#1E9FFF', layout: ['prev', 'page', 'next', 'limit...
    //分页
    	layui.laypage.render({
    		elem : 'pageInfo',
    		count : ${query.rsCount},
    		limit: ${query.pageSize},
    		curr: ${query.currentPage},
    		theme : '#1E9FFF',
    		layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
    		jump: function(obj, first){
    			//首次不执行
    			if(!first){
    				$("#pageSize").val(obj.limit);
    				search(obj.curr);
    			}
    		}
    	});
    
    展开全文
  • Layui 分页

    2019-10-02 23:19:29
    link href="~/Content/layuiCMS/layui/css/layui.css" rel="stylesheet" /> <script src="~/Content/layuiCMS/layui/layui.js"></script> 二、界面设计 <div c...

     

    第一步:添加引用

    <link href="~/Content/layuiCMS/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/layuiCMS/layui/layui.js"></script>

     

    二、界面设计

    复制代码
    <div class="layui-form news_list">
            <div class="layui-form users_list">
                <table class="layui-table">
                    <colgroup>
                        <col width="50">
                        <col>
                        <col width="18%">
                        <col width="8%">
                        <col width="12%">
                        <col width="12%">
                        <col width="18%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose"></th>
                            <th>登录名</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>邮箱</th>
                            <th>地址</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="users_content"></tbody>
                </table>
            </div>
            <div id="page"></div>
        </div>
    复制代码

    三、添加一个js文件,并将文件引入界面:

    复制代码
    layui.config({
        base : "js/"
    }).use(['form','layer','jquery','laypage'],function(){
        var form = layui.form(),
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            laypage = layui.laypage,
            $ = layui.jquery;
    
        //加载页面数据
        var usersData = '';
        $.get("/UserManage/GetInfo",{
            pageSize:10, //显示页面的数量
            pageindex:1 //当前页
        }, function (data) {
              usersData = data.rows;
              //执行加载数据的方法
              usersList(data.rows);
        })
    
        //表格数据和分页
        function usersList(that) {
            //渲染数据
            function renderDate(curr) {
                var dataHtml = '';
                if (!that) {
                    currData = usersData.concat().splice(curr * nums - nums, nums);
                } else {
                    currData = that.concat().splice(curr * nums - nums, nums);
                }
                if (currData.length != 0) {
                    for (var i = 0; i < currData.length; i++) {
                        dataHtml += '<tr>'
                        + '<td><input type="checkbox" name="checked"  value="' + currData[i].Id + '" lay-skin="primary" lay-filter="choose"></td>'
                        + '<td>' + currData[i].LoginName + '</td>'
                        + '<td>' + currData[i].Name + '</td>'
                        + '<td>' + currData[i].Sex + '</td>'
                        + '<td>' + currData[i].Email + '</td>'
                        + '<td>' + currData[i].Address + '</td>'
                        + '<td>' + currData[i].Birth + '</td>'
                        + '<td>'
                        + '<a class="layui-btn layui-btn-mini users_edit layui-btn-mini"><i class="iconfont icon-edit"></i> 编辑</a>'
                        + '<a class="layui-btn layui-btn-danger layui-btn-mini users_del" data-id="' + currData[i].Id + '"><i class="layui-icon"></i> 删除</a>'
                        + '</td>'
                        + '</tr>';
                    }
                } else {
                    dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
                }
                return dataHtml;
            }
    
            //分页
            var nums = 10; //每页出现的数据量
            laypage({
                cont: "page",
                pages: Math.ceil(usersData.length / nums), //得到总页数
                skip: true, //是否开启跳页
                groups: 5, //连续显示分页数
                jump: function (obj) {
                    $(".users_content").html(renderDate(obj.curr));   //渲染数据
                    $('.users_list thead input[type="checkbox"]').prop("checked", false);
                    form.render(); //渲染表单
                }
            })
        }
    
        //全选
        form.on('checkbox(allChoose)', function (data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
    
        //通过判断文章是否全部选中来确定全选按钮是否选中
        form.on("checkbox(choose)", function (data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
            var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
            if (childChecked.length == child.length) {
                $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
            } else {
                $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
            }
            form.render('checkbox');
        })


    })
    复制代码

     

    后台控制器:

    复制代码
       public ActionResult GetInfo(int pageSize, int pageIndex)
            {
                   //使用EF框架的增删改查和分页的公共类
                    BaseRepository<Articles> db = new BaseRepository<Articles>();
                    int total;
                    Func<Articles, bool> where = s => s.ID > 0 && s.Type == 2;
                    Func<Articles, int> order = s => s.ID;
                    var list = db.LoadPagerEntities(pageSize, pageIndex, out total, where, false, order).ToList();
                    var dic = new Dictionary<string, object>
                    {
                        {"rows",list },
                        {"total", total}
                    };
                    return Json(dic, JsonRequestBehavior.AllowGet);
            }
    复制代码

    转载于:https://www.cnblogs.com/sword082419/p/9316981.html

    展开全文
  • Layui分页

    2020-07-03 15:11:21
    1.把js修改本地的即可 <!... <... <...Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta
  • jquery layui分页控件在项目开发阶段经常用到,下面通过本文给大家介绍jQuery layui分页控件的使用,非常不错,感兴趣的朋友一起看下吧
  • layui分页使用

    千次阅读 2018-04-18 16:18:08
    layui分页使用个人觉得比bootstrap使用来的复杂,这里说一下layui分页的使用方法var currPage =1;var limit =10;laypage.render({ //layui分页 elem:'page', //分页容器id count:count,//总条数  curr:...
  • 本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>分页</title> <link rel=...
  • 漂亮的layui 分页展示

    万次阅读 2017-04-25 09:50:36
    layui 分页
  • layui分页样式改变

    千次阅读 2020-01-17 09:04:45
    layui分页的原始样式: 修改成如下样式: 新增css代码如下:(pageBox为放置分页的容器id) /*修改layui分页的样式*/ #pageBox .layui-laypage a{ color: #94999F; font-size: 12px; } #pageBox .layui-...
  • //layui分页 layuiInit(); function layuiInit() { //layui分页 let page = ‘{KaTeX parse error: Expected 'EOF', got '}' at position 6: dangq}̲'; //页数 let …fenye}’;//数据总数 let maxnum = 100; //每...
  • layui分页成功,但点击页数时,列表数据正确,但是页数还是显示到第一页 需要设置如图的属性,需要把点击的页数传过去。 参考文献 https://blog.csdn.net/Pruett/article/details/84070618 button和input的区别 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,115
精华内容 846
关键字:

layui分页