Layui数据表格的动态加载

PHY_68

发布于 2020-10-28 11:16:30

2.6K0

发布于 2020-10-28 11:16:30

Layui是一个很好的前端框架，很多人都会用到，layui的数据表格这个就是从数据库查询出来的数据渲染到表格上。

首先先定义个layui统一返回的格式类：

@Data

public class LayuiVo<T> {

    private Long count;

    public int code;

    public String msg;

    private List<T> data;

}

@Data是Lombok的插件，可用可不用。

这里我用的是mybatis-plus做的

然后就是后台查询数据返回了

@PostMapping("/programme")

@ResponseBody

public LayuiVo<YwPlan> programme(@Param("limit") int limit, @Param("page") int page){

    Page<YwPlan> pages = new Page<YwPlan>(page,limit);

    IPage<YwPlan> iPage=ywPlanService.page(pages, null);

    //数据

    List<YwPlan> planslist = iPage.getRecords();

    //总页数：iPage.getTotal()

    LayuiVo<YwPlan> layuiList = new LayuiVo<>();

    layuiList.setData(planslist);

    layuiList.setCount(iPage.getTotal());

    return layuiList;

}

 

参数：

@Param("limit"


) int limit 每页的条数

@Param("page") int page 目前是第几页

Page<YwPlan> pages = new Page<YwPlan>(page,limit);

IPage<YwPlan> iPage=ywPlanService.page(pages, null);

这个就是分页的代码，IPage这个是已经封装好的类，里面有很多字段，我这里只是用到了获取数据getRecords()和总行数getTotal，这个是可以直接点进源码看就行

查询出来后就是前端渲染的问题了，这里官网上已经有很清楚的代码了

1.  var table = layui.table;

2.   

3.  //执行渲染

4.  table.render({

5.  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）

6.  url:”查询数据的路径”

7.  ,height: 315 //容器高度

8.  ,cols: [{}] //设置表头

9.  //,…… //更多参数参考右侧目录：基本参数选项

10. });

11.

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-10-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

mybatis