• layui框架之table表格操作数据实现分页


    Layui是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区。

    之前写一个一个关于数据的table表格显示 并带有分页功能,实现过程遇到了很多问题,现抽空总结一下。

    使用之前请先详细阅读layer的文档http://www.layui.com/doc/modules/layer.html

    首先下载最新版的layui文件:

    下载完之后引入到自己的项目中,放在根目录的下面某一个地方:

    然后在你要用的jsp页面上引入相应的js和css:

    此时路径应为你放至layui文件包的路径注意路径不要引入错误!

    简单的一个demo页面:

    页面显示为:

    在此讲一下传入的数据格式

    {"code":0,"msg":"","count":29,"data":[{"id":10000,"username":"user-0",...........

    这个是你后台需要返回的数据格式,可以自己定义,参考:https://www.layui.com/demo/table/user/?page=1&limit=30

    我自己定义方式为:

    首先创建一个返回类型实体类: ResultUtil

    写相应的get,set方法,然后按照layui定义的返回类型格式写这个方法的实现类:

    其中object就是你要在表格中显示的数据count为数据的条数,然后写相应的方法,sql语句 这些都很简单,在此不多说,写完之后

    在控制层方法中也就是前台页面url这个路径的方法中调用此方法,注意方法的接口http请求类型,默认:get

    然后在前台页面中使用:

    红圈圈中的这个方法在页面控制台可以看到你传入的数据。你传入的data数据一定要和你页面上写的数据一致。

    这个是简单的layui展示table表格的实现过程。

    接下来讲一讲分页

    layui有自带的分页功能,样式还是很好看的,开启分页的方法:http://www.layui.com/demo/table/page.html

    开启之后可以自定义分页的样式:http://www.layui.com/demo/table/resetPage.html

    此时分页包括分页的样式都已经弄好,但是问题就是我们页面的数据还是查出来的那么多条并没有根据layui定义分页去显示,这个怎么去解决?

    这个问题就是说的重点:实现table表格数据的分页

    因为静态json不支持表格自带分页,所以我们要在后台定义好分页的数据传入前台页面。表格设置了page:true
    之后,就证明分页功能启用了,剩下的就是后台controller中获得默认传过去的limit和page两个参数,根据参数计算获得当前页显示的数据,然后把数据打包为指定的json格式设置返回值就ok了

    其实现方法有两种

    第一种:自定义原生的sql语句分页:在前台页面配置的table中开启分页以后访问url路径的时候会传过去两个参数,pagelimit。page为当前的页码,limit为你定义的分页条数,这样可以在后台方法中

    接收这两个参数:

    接收之后我们要对page进行重新定义,方便于sql语句的分页

    这样之后调用service层方法到mapper文件的sql语句可以直接这样写(demo示例):

    select 数据,数据,数据,......   from 表名 limit #{pages,jdbcType=INTEGER},#{limit,jdbcType=INTEGER}

    这样之后 页面就实现分页了,很简单的。

    接下来说说第二中更为方便的写法

    就是使用框架的配置:

    首先引入相应的jar包:

    然后在mybatis-config.xml中配置分页:

    请注意上图中我用红色圈圈中的两个参数,这个两个很重要,在dao层写接收page和limit两个参数的时候需要用到

    不管接受到的参数为什么 注解中一定要用到配置中设定的参数数据,这样框架才会帮你解析。

    配置成功之后 控制层后台只需接受这两个参数,sql语句只需写个简单的查询就可以了,框架会自动帮你实现分页。

    至此分页讲完。

    接下来额外补充一下页面数据的转换

    比如说页面上展示的是个人信息:性别字段数据表中存储的是int类型0或者1  但是在页面上需要用男和女展示出来,有两种实现方式;

    第一中很简单  直接在后台service实现方法中给替换成相应的类型,我主要说第二中页面中替换:

    首先请先仔细阅读官方开发文档:http://www.layui.com/doc/modules/table.html#cols

    请注意这个字段:

    点击详见自定义模板http://www.layui.com/doc/modules/table.html#templet

    实现:

    在table定义中需要转义的字段后面加上templet这个参数(模板选择器)

    然后写templet对应的模板,它可以存放在页面的任意位置。模板遵循于 laytpl 语法,可读取到返回的所有数据:

    注意两者的对应关系:

    模板中第一个个我只写了一个“男”,这个只是将数字1转为为男在页面上显示,第一个我加了一个span,这个不仅仅是将0替换成“女”,而且还改变了其颜色。

    只要认真阅读了layui开发文档这样都可以实现。

  • 相关阅读:
    Maven记录
    TP-Link的config.bin的解码
    SLF4JLogFactory does not implement org.apache.commons.logging.LogFactory
    axis1.4调用WebService报找不到分派方法
    Spring在单例bean中使用session、request范围的bean
    使用spring-session同时用session范围bean的问题
    tomcat session共享快速入门
    Log4j配置spring+druid打印日志
    基于WebSocket的多人在线坦克大战demo
    IDEA将maven项目配置到本地tomcat中运行
  • 原文地址:https://www.cnblogs.com/unidentified/p/8405774.html
Copyright © 2020-2023  润新知