layui表格使用及分页实现

前言

最近一直见群友问table怎么用的，怎么渲染不了我的数据，开了分页怎么没有用…故写本博客望给群友以及刚用layui的开发者解疑答惑，博主是用java写后端的，其他语言的话可做参考本博客

表格

先给大家来个效果图

我们今天只讲下table里面的，导航栏什么的就不说了，之所以放上去主要还是好看一点。。
下面贴的代码什么的都是没有导航栏的
先来个前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全部账单</title><link rel="stylesheet" href="../../layui/css/layui.css" media="all"><script src="../../layui/layui.js" charset="utf-8"></script>
</head>
<body><table class="layui-hide" id="test" lay-filter="test"></table><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div>
</script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>layui.use('table', function () {var table = layui.table;table.render({elem: '#test', url: '/user/selectAllReim', toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}], title: '用户数据表', cols: [[{type: 'checkbox', fixed: 'left'}, {field: 'userReimId', title: '账单ID', width: 90, fixed: 'left', unresize: true, sort: true}, {field: 'userReimType', title: '项目类型', width: 100}, {field: 'userReimDetails', title: '项目详细'}, {field: 'userReimDepartment', title: '负责部门', width: 120}, {field: 'userReimBank', title: '开户银行', width: 100}, {field: 'userReimBankId', title: '银行账户', width: 120, sort: true}, {field: 'userReimTotal', title: '费用总计', sort: true, width: 120}, {field: 'userReimState', title: '审核状态', width: 120, sort: true}, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120}]]// 开启代表显示分页，false代表不显示分页，不管开不开启都会传一个page（当前页数）、limit（一页显示多少条数据）给后端, page: true});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});//监听行工具事件table.on('tool(test)', function (obj) {var data = obj.data;//console.log(obj)if (obj.event === 'del') {layer.confirm('真的删除行么', function (index) {obj.del();layer.close(index);});} else if (obj.event === 'edit') {layer.prompt({formType: 2, value: data.email}, function (value, index) {obj.update({email: value});layer.close(index);});}});});
</script>
</body>
</html>

首先field代表你后端传回来的res里面data数组一个对象的属性值，tiltel是表格的。我们先看下官网文档里table的数据接口，找到layui的table文档里面有个数据接口：
这里面就是我们后台需要返回的数据格式（不懂为啥这个重要的东西放这个不大起眼的地方。。），只要你按它格式返回就会自己渲染，非常爽，就不用我们for循环给它拼出来了。
我们再看一下它的格式，打开后：

可以很明显的看出是json格式的数据（layui交互的数据都是json的）。
一共有4个参数，第一个是键是code，值是0,：这个是layui自己的我们不用管它；第二个键是msg，值是“”，就是空字符串，可以装提示信息什么的，它官方是空那我们也不用了；第三个是键是dada，值是一个数组（看到中括号就知道是数组了【】），这个是最重要的我们可以看出data数组里面一个个元素是一个对象，对象对应的属性就是我们数据库字段（就是实体类），对应的上面field，一定要对应不然不显示的；第三个键是count，值是1000，这个官方乱写的我觉得有点误导我们了，没有1000条数据写个1000条。。，这个count是我们表格里一共有多少个数据我们后端封装的时候再查一次，做值返回。
分页我们前端只用打开page:ture就可以了，因为layui是后端分页所以前端不用管太多的事，后端分页比前端分页好处多很多。很多小伙伴会问关了分页为什么还会传一个page，limit参数给后端，关了只是把分页显示给关了这参数都会传的。
上面前端部分就完成了，接下来就是后端需要操作的了。

@GetMapping("/selectAllReim")public Map<String, Object> selectAllReim(HttpServletRequest request, Page page) {//        查询第1条到第10条的数据的sql是：select * from table limit 0,10;// ->对应我们的需求就是查询第一页的数据：select * from table limit (1-1)*10,10;//        查询第10条到第20条的数据的sql是：select * from table limit 10,10;// ->对应我们的需求就是查询第二页的数据：select * from table limit (2-1)*10,10;//getpage是得到跳转前端分页的第几页，getlimit是得到一页显示多少条数据page.setPage(((page.getPage() - 1) * page.getLimit()));HttpSession session = request.getSession();User user = (User) session.getAttribute("user");// list是根据我们所登录的用户名所查出来的所有账单List list = userReimService.selectAllReim(user.getUsername(), page);Integer integer = userReimService.selectAllReimNum(user.getUsername());// 返回给前端的键值对类型Map map = new HashMap();// layui的表格数据接口所需要的类型map.put("code", "0");map.put("msg", "");map.put("count", integer);map.put("data", list);return map;}

我用的mysql数据库所以是10条是0-10，sqlserver跟Oracle的话不一样，具体百度（我也忘了。。）
首先传入的两个参数一个是request是我把一个用户存入session容器中，后面查询需要取出用户获取它的username进行条件查询，如果不需要可以省略，Page是一个对象（我自己根据layui传的参封装的）：

@Data是个插件不用的话生成get/set也可以，相信大伙都知道的
每次点下一页或者跳到某页、选择一页多少条的时候都会发起一次请求给后端，然后后端按分页和条数等筛选出相应信息给前端重新渲染。
List list = userReimService.selectAllReim(user.getUsername(), page);
这个是查数据库出来的sql什么的我就不写了，相信各位也不屑于要。注意的是list里面存的都是一个对象，我dao层里面给了个范型：

Integer integer = userReimService.selectAllReimNum(user.getUsername());
是我单独写的一个sql查出来的是整个用户未分页的条数，我用count（*）查出来，因为上面的list已经分页了所以list.size查出来的肯定是小于等于limit，我们需要再写一个sql进行查条数。
最后我们进行上面的封装就得了。
首先是json类型的也就是键值对，直接用个map容器装起来。
最后记得返回json格式，springboot直接一个@ResponseBody注解加在Controller层的类上就可以了。
搞定收工。。

如有帮助，烦请扫码支持

layui表格使用及分页实现相关推荐

php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
layui数据表格数据绑定加分页代码
layui数据表格数据绑定加分页代码最近使用layui数据表格感觉特别方便,一段代码直接绑定数据加上分页加载数据直接上代码 layui.use(['table', 'laypage'], func ...
Layui表格异步请求服务器端分页数据
文章仅作为个人备忘,未精细整理方法及配置参考处layui网站及相关网络资源,实现了通过Layui表格快速实现请求服务器端分页数据. 前端代码 <!DOCTYPE html> <ht ...
修改layui框架html,layui框架如何设置分页？（方法介绍）
layui框架如何设置分页?下面本篇文章给大家介绍一下layui框架中设置分页的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 具体步骤如下: 1.从官方文档 - 内置模块 ...
layui表格展示数据时：返回的数据不符合规范，正确的成功状态码应为：code: 0
1.今天,用django和layui结合,处理表格展示数据时,有数据的表格能正常显示列表,无数据的表格却提示了:返回的数据不符合规范,正确的成功状态码应为:"code": 0,于是 ...
Layui表格实现显示空白行数据
在做餐饮的基础资料管理的时候,有些表格需要显示一条空白行,因为增删该三个控件按钮需要加载数据之后菜显示出来,如下所示: 上面表格最右边的控件按钮是用layui表格绑定列工具条实现的,代码如下: ...
layui表格table固定表头第一行固定显示
layui表格table固定表头第一行固定显示代码示例如下: layui.use('table', function(){$ = layui.jquery;var table = layui.tab ...
layui表格重载后界面闪动解决方案
layui框架默认提供的table模块,使用该模块可以快速高效的完成表格数据的开发.但是最近在使用过程中发现了一些小问题.下面一起来看下吧! 官方说明地址:https://www.layui.com/ ...
layui表格更改一列数据_【WEB前端开辟】layui表格数据变动的一种处理方式
表格数据更改,平常包括几个内容:新增.修正.删除.挪动,开辟中常常会面对的一个题目就是更改以后怎样将数据同步到节点上,一向以来个人的提议照样应用表格重载,不管是url情势的照样data情势的实际都是须 ...

layui表格使用及分页实现

前言

表格

layui表格使用及分页实现相关推荐

最新文章

热门文章