layui框架之table表格操作数据实现分页
Layui是⼀款免费，开源，轻量级的前端cms框架，适⽤于企业后端，能快速上⼿开发，集成了常⽤的组件，还有完善的⽂档和社区。之前写⼀个⼀个关于数据的table表格显⽰ 并带有分页功能，实现过程遇到了很多问题，现抽空总结⼀下。
使⽤之前请先详细阅读layer的⽂档：
⾸先下载最新版的layui⽂件：
下载完之后引⼊到⾃⼰的项⽬中，放在根⽬录的下⾯某⼀个地⽅：
然后在你要⽤的jsp页⾯上引⼊相应的js和css：
此时路径应为你放⾄layui⽂件包的路径，注意路径不要引⼊错误！
简单的⼀个demo页⾯：
页⾯显⽰为：
在此讲⼀下传⼊的数据格式：
{"code":0,"msg":"","count":29,"data":[{"id":10000,"username":"user-0",...........
这个是你后台需要返回的数据格式，可以⾃⼰定义，参考：
我⾃⼰定义⽅式为：
⾸先创建⼀个返回类型实体类： ResultUtil ：
写相应的get，set⽅法，然后按照layui定义的返回类型格式写这个⽅法的实现类：
其中object就是你要在表格中显⽰的数据，count为数据的条数，然后写相应的⽅法，sql语句 这些都很简单，在此不多说，写完之后在控制层⽅法中也就是前台页⾯url这个路径的⽅法中调⽤此⽅法，注意⽅法的接⼝http请求类型，默认：get：
然后在前台页⾯中使⽤：
红圈圈中的这个⽅法在页⾯控制台可以看到你传⼊的数据。你传⼊的data数据⼀定要和你页⾯上写的数据⼀致。
这个是简单的layui展⽰table表格的实现过程。
接下来讲⼀讲分页：
layui有⾃带的分页功能，样式还是很好看的，开启分页的⽅法：
开启之后可以⾃定义分页的样式：
此时分页包括分页的样式都已经弄好，但是问题就是我们页⾯的数据还是查出来的那么多条，并没有根据layui定义分页去显⽰，这个怎么去解决？
这个问题就是说的重点：实现table表格数据的分页：
因为静态json不⽀持表格⾃带分页，所以我们要在后台定义好分页的数据传⼊前台页⾯。表格设置了page：true
之后，就证明分页功能启⽤了，剩下的就是后台controller中获得默认传过去的limit和page两个参数，根据参数计算获得当前页显⽰的数据，然后把数据打包为指定的json格式设置返回值就ok了
其实现⽅法有两种：
第⼀种：⾃定义原⽣的sql语句分页：在前台页⾯配置的table中开启分页以后访问url路径的时候会传过去两个参数，page和limit。page为当前的页码，limit为你定义的分页条数，这样可以在后台⽅法中
接收这两个参数：
接收之后我们要对page进⾏重新定义，⽅便于sql语句的分页：
这样之后调⽤service层⽅法到mapper⽂件的sql语句可以直接这样写（demo⽰例）：
select 数据，数据，数据，......  from 表名 limit #{pages,jdbcType=INTEGER},#{limit,jdbcType=INTEGER}
这样之后 页⾯就实现分页了，很简单的。
接下来说说第⼆中更为⽅便的写法：
就是使⽤框架的配置：
⾸先引⼊相应的jar包：
然后在l中配置分页：
请注意上图中我⽤红⾊圈圈中的两个参数，这个两个很重要，在dao层写接收page和limit两个参数的时候需要⽤到：
不管接受到的参数为什么 注解中⼀定要⽤到配置中设定的参数数据，这样框架才会帮你解析。
配置成功之后 控制层后台只需接受这两个参数，sql语句只需写个简单的查询就可以了，框架会⾃动帮你实现分页。layui下载
⾄此分页讲完。
接下来额外补充⼀下页⾯数据的转换：
⽐如说页⾯上展⽰的是个⼈信息：性别字段数据表中存储的是int类型0或者1  但是在页⾯上需要⽤男和⼥展⽰出来，有两种实现⽅式；第⼀中很简单  直接在后台service实现⽅法中给替换成相应的类型，我主要说第⼆中页⾯中替换：
⾸先请先仔细阅读官⽅开发⽂档：
请注意这个字段：
点击详见⾃定义模板：
实现：
在table定义中需要转义的字段后⾯加上templet这个参数（模板选择器）：
然后写templet对应的模板，它可以存放在页⾯的任意位置。模板遵循于  语法，可读取到返回的所有数据：
注意两者的对应关系：
模板中第⼀个个我只写了⼀个“男”，这个只是将数字1转为为男在页⾯上显⽰，第⼀个我加了⼀个span，这个不仅仅是将0替换成“⼥”，⽽且还改变了其颜⾊。
只要认真阅读了layui开发⽂档这样都可以实现。
转载于:wwwblogs/ka-bu-qi-nuo/p/8405774.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。