精华内容
下载资源
问答
  • 项目总结17-使用layui table分页表格总结 前言  在项目中,需要用到分页的表格来展示数据,发现layui分页表格,是一个很好的选择;本文介绍layui table分页表格的前后端简单使用 关键字  layui table 分页...

    项目总结17-使用layui table分页表格总结

     

    前言

      在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择;本文介绍layui table分页表格的前后端简单使用

    关键字

      layui   table   分页

    正文

    1-外部引用

      使用layui table 需要引用layui.all.js 和  layui.css

      下载地址:https://www.layui.com/

      我是直接将整个layui文件夹全部加入到项目中

    2-前端代码

    实例化表格

        <table id="fansTable" lay-filter="test"></table><%--layui初始化需要的table--%>
            <script>
            layui.use('table', function(){
                var table = layui.table;
                //第一个实例
                table.render({
                    elem: '#fansTable',//实例化需要的table的id
                    height: 700,//容器高度
                    url: 'memberfans/list/'+${entity.id},//数据请求接口URL,GET方法,且服务端分页
                    page: true ,//开启分页
                     cols: [[ //表头
                        {type:'numbers', title: '序号', width:80, sort: true, fixed: 'left',}
                        ,{field: 'nameReal', title: '用户姓名', width:200}
                        ,{field: 'nameNick', title: '用户昵称',width:200}
                        ,{field: 'mobile', title: '手机号', width:200, sort: true}
                        ,{field: 'avatarUrl', title: '头像', width:200, templet: '#avatarTpl',sort: true}//templet参数用户定制列的数据特殊标签处理
                        ,{field: 'bindShopTimestr', title: '关联时间', width:200, sort: true}
                    ]]
                });
            });
        </script>
        <%--定制列样式,展示图片--%>
        <script type="text/html" id="avatarTpl">
            <img style="width:100px;height:100px" src="{{d.avatarUrl}}">
        </script>

     设置列宽

        <style>
            td .layui-table-cell {
                height: auto;
                line-height: 100px;
            }
        </style>

     

    3-后台代码-数据请求接口

    import com.hs.common.util.json.JsonUtil;
    
    @Controller
    @RequestMapping(value="/memberfans")
    public class MemberFansController extends BaseWebController<MemberFans> {
    
        @RequestMapping(value="/list/{shopId}",method = RequestMethod.GET)
        @ResponseBody
        public String listMemberFans(@PathVariable(value="shopId",required = true)Long shopId) throws ServerSqlErrorException {
            MemberFans req = new MemberFans();
            req.setShopId(shopId);
            List<MemberFans> memberFans = memberFansService.listByCondition(req);
    
            //需要注意返回参数的格式,参数包括count、code、msg、data
            //并且需要以json字符串返回
            Map<String,Object> rsMap = new HashMap<String,Object>();
            rsMap.put("count", memberFans.size());
            rsMap.put("code", 0);
            rsMap.put("msg", "detail");
            rsMap.put("data", memberFans);
            return JsonUtil.toJson(rsMap);
        }
    }

     

    4-展示效果

     

    5-总结

      1-当前示例使用的初始化渲染方式是方法渲染

      2-分页方式是且服务端分页客户端分页

      3-layui官网中有非常详细的文档说明,链接见参考资料-2

     

    参考资料

    1-https://www.layui.com/

    2-https://www.layui.com/demo/table.html

    转载于:https://www.cnblogs.com/wobuchifanqie/p/10338291.html

    展开全文
  • layui获取分页表格中所有的值

    千次阅读 2018-08-24 21:01:48
      我这里有两个 tab 用 id区分 使用封装的 layui.table.cache.id 就可以获取 table表格中的数据了        

     

     

    我这里有两个 tab 用 id区分  使用封装的 layui.table.cache.id   就可以获取 table表格中的数据了

     

     

     

     

    展开全文
  • 今天小编就为大家分享一篇layui表格分页 记录勾选的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui分页表格及日期乱码已替换中文为编码
  • 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表格分页不生效(无法正常显示)怎么解决?下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。应该先利用layui table中的...

    layui表格分页不生效(无法正常显示)怎么解决?下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    df8543f5cfedab5157b97653b747e690.png

    应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从url中get到的数据进行手动分页处理。layui.use('table', function(){

    var table = layui.table;

    table.render({

    elem: '#test'

    ,url:'http://localhost:8099/getScoreRecord'

    ,title:'积分操作记录表'

    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

    ,cols: [[

    {field:'sc_re_index', title: '序号', sort: true}

    ,{field:'user_acc', title: '账户名'}

    ,{field:'operate_value', title: '积分数额', sort: true}

    ,{field:'rest_value', title: '剩余积分'}

    ,{field:'sc__re_description', title: '备注'} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增

    ,{field:'operate_time', title: '积分操作时间', minWidth: 100, sort: true}

    ]]

    ,page: true

    ,limits: [3,5,10] //一页选择显示3,5或10条数据

    ,limit: 10 //一页显示10条数据

    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据

    var result;

    console.log(this);

    console.log(JSON.stringify(res));

    if(this.page.curr){

    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);

    }

    else{

    result=res.data.slice(0,this.limit);

    }

    return {

    "code": res.code, //解析接口状态

    "msg": res.msg, //解析提示文本

    "count": res.count, //解析数据长度

    "data": result //解析数据列表

    };

    }

    });

    });

    更多web前端知识,请查阅 HTML中文网 !!

    展开全文
  • layui分页数据表格渲染

    千次阅读 2018-01-30 09:40:42
    最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来 先说前端HTML和js代码 先下载layuijs文件,在页面引入layui的js在...
  • layui表格分页

    2018-12-27 00:52:30
    本人也是自学layui,看了网上很多表格分页的帖子,感觉都摸不着头脑,自己摸索了半天,总算是实现了 首先说下我用的是springboot+ssm 效果图如下 那么我们开始吧 先在pom.xml文件中导入分页插件 &lt;...
  • layUi分页表格搭建

    2019-06-18 16:20:02
    layui分页表格搭建 对于数据分页展示需要用到自己的定义的颜色时,可以采用下面的实例 首先导入layui的依赖包 <link rel="stylesheet" href="${basePath}/plugin/layui/css/layui.css"> <script src="${...
  • layui表格分页以及菜单使用 本人是第一次写博客,写的不好不要喷我 1.首先引入layui对应的css和js文件 <link rel="stylesheet" th:href="@{/webjars/layui/2.4.5/css/layui.css}" media="all"> <script type...
  • ;&gt;&gt;&gt;&gt;...主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 &lt;script type="text/javascript" src="${pageContex
  • Layui表格分页心得

    2021-09-15 10:05:26
    很多小伙伴们在使用layui的时候,发现它的表格渲染实现很简单,只需要给个接口,在后台拿数据并且使用规定的格式返回数据就行了,具体返回的json格式如下(用的是Java代码) private int code;//状态码 private ...
  • --分页--> <div id="pageUtil" style="margin:0 auto;width:1000px;"></div> layui.use(['laypage'],function(){ var laypage = layui.laypage; laypage.render({ elem: 'pageUtil' // ...
  • SpringMVC中layui 表格分页分页前段分页代码后端代码定义返回的实体类业务层代码持久层 分页 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章...
  • layUI表格分页插件

    2017-06-14 17:54:49
    大部分代码转自layUI社区 《嘉文》 道友的自定义分页插件 随后我增加了CheckBox选中行功能,并完善了一些《嘉文》道友没有明确指出的部分用法。 layui.define(['form','jquery', 'laypage'], function ...
  • Layui 表格分页控件

    2020-09-29 09:57:10
    分页模块 – layui.laypage layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。 快速使用 laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可...
  • SSM+Layui表格分页显示

    千次阅读 2021-06-11 08:15:38
    天气:阴天 心情:平常心 目前问题: 面 这是接着上一篇SSM+layui分页数据显示的有分页数据的更新 主要功能展示图一: 临毕业, 找工作中
  • django+layui表格分页

    千次阅读 2019-02-17 14:42:58
    from django.core.paginator import Paginator # Django内置分页功能模块 #今日所有计划 @csrf_exempt def ajax_webPlan(request): date = time.strftime('%Y%m%d', time.localtime(time.time())) datas = models....
  • layui表格分页 记录勾选

    千次阅读 2019-06-10 09:51:52
    layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。 首先,监听表格的复...
  • layui分页table表格使用

    2018-09-14 13:44:00
    html: <table id="demo" lay-filter="test"></table> script: 1 <script> 2 layui.use('table', function () { 3 var table = layui.table; 4 5 ...
  • layui表格 分页div失效

    2020-11-20 10:58:08
    本该有分页的地方,没有分页,F12看了一下,div是存在的,莫名加了一个“layui-hide”属性, F12: js: // 渲染表格 var tableResult = table.render({ elem: '#' + Device.tableId, url: Feng.ctxPath + '/...
  • 先看一下图: 看到图中并没有展示分页的工具,layui给的实例 page:true就可以,但是写上了也不行 解决办法:找到你layui.css 里面有个 .layui-hide 属性 把这个注释掉就可以了 ...
  • layui表格开启属性page:true,通过参数传递页码和行数
  • layui表格分页--table

    万次阅读 2018-05-30 15:23:03
    后台做好分页,将page页对应数据返回,主要采用layui的laypage模块1.先引入layui.css、layui.js&lt;link rel="stylesheet" href="layui/css/layui.css" media="all"&gt; &...
  • 关于layui表格分页的问题记录 lauyi表格在渲染的时候有一个属性叫page:(true|false),true的时候为开启分页,false是关闭分页。 遇到的问题:当使用layui的请求来渲染表格的时候,设置了分页,有时候会失效(比如我...

空空如也

空空如也

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

layui不分页表格