首先，最简单的先渲染一个表格，参考官方示例：
这里先讲讲一些渲染细节：
layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。
另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：
否则用传统方式拼接html字符串就相形见绌了（不推荐）：
接着，看一下分页：
从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：
同样，响应参数名也是可以定制的，参考response属性：
注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：
parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返颂桐培回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。
-----------------------快乐的分割线，前方jojo高能-----------------------
可能也有小伙伴无视了 request、response、parseData 三剑客，野唯转而用起了data属性，过程如下：
拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableIns.reload({ data: res.data })一波，达成666 *** 作。
这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。
因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只轮慧有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。
1
第一步销御在我们的电脑上打开软件，新建一个html，并添加上layui的js和css文件，如下图所示：
2
第二步我们打开新建的html文件,在<head>标签纯芦里面引入layui.css，layui.js文件，如下图所示：
3
第三步我们开始写body页面内容，这里给的表亏裤岩格内容是layui的表格示例数据，如下图所示：
4
第四步我们最后来给表格数据添加点击事件，table.on('tool(demoEvent)', function(obj){}来监听单元格事件，layer.prompt()d出框，使用 obj.update({ sign: value })进行更新表格和缓存，如下图所示：
5
第五步我们在浏览器中打开html页面，可以看到表格数据内容，如下图所示：
6
第六步我们点击表格数据内容，d出框显示单元格里面的数据，可以看到通过layui，给表格数据添加了点击事件，如下图所示：
首先是官方文档。我真的不是第一次觉得阅读官方文档比百度上搜索要有效率几百倍了，当然前提教程是汉语。组件库
使用文档
Springboot+Thymeleaf+layui框架的配置与使用
Spring data jpa 分页+ layui数据表格渲染数据
我觉得我现在如段能看懂了，感慨。
layui.table 里面 json数据有多层嵌套, 请问要怎么获取数据?
下面这个主楼里用的是改底层源码的方式，我觉得不可取。
layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法
下面有对主楼这样的补充，但也是改的底层源码：
我用的版本中Layui符号是以字体的形式表示的（layui 2.3.0 之前只支持采用 unicode 字符），可能也是被拦截掉了，参考以戚山下写法。
SpringBoot 中 引用LayUI font 不显示问题解决办法
以后可以直接使用内联元素调出字体图标。
Layui字体图标库
第二种方法（我没试过）：
Spring Boot使用layui的字体图标时无法正常显示 解决办法
layuiAdmin使高橡中用总结，基于springmvc
Layui在MVC下的配置过程，我没用到，但是感觉不错。去看了看这位以前的文章，感叹大佬真的太多了，随处一看就都是大佬。
虽然大家都说毕设很水，但是年轻又有为的人却不计其数，可能他们很聪明早就开始做自己的项目了，没把毕设当作发力点。那我就将错就错吧，我想学习，我很羡慕。
通过table.render来刷新、绘制table
Layui表格单元格编辑保存
le可编辑扩展下拉框编辑器
layui的table中日期格式转换
这个除了显示其实还有个问题：当这个日期还是null时，会自动显示当前日期，所以需要加一个判断，不为空才显示。
下面是我用在了进度计划行内编辑中的例子。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）