layui数据表单自动分页（springboot+mybatis-plus）

最新推荐文章于 2023-02-10 17:03:27 发布

zhaojiabao_

最新推荐文章于 2023-02-10 17:03:27 发布

阅读量558

点赞数 1

分类专栏： Mybatis-plus springboot 文章标签： layui spring

本文链接：https://blog.csdn.net/qq_43521797/article/details/118786221

版权

springboot 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

Mybatis-plus

4 篇文章 0 订阅

订阅专栏

layui数据表单自动分页

1.要实现的效果

在这里插入图片描述

2.html及js

自动分页表格，和普通的表格的js代码部分差不多，就多了一句 page： true
但前后端交互的数据不一样了。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/admin/fen' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
     ,{field: 'password', title: '密码', width:80, sort: true}
      ,{field: 'age', title: '年龄', width:80}
      ,{field: 'did', title: 'did', width: 177}
    ]]
  });
  
});</script>
</body>
</html>

3.Controller层

request参数和接口数据
开启自动分页后，request里会自动带上分页数据。
page：第几页
limit：每页几条数据

这些参数是可以通过HttpServletRequest取出来的。
（这里只是展示，实际我这里用到springmvc的自动取参。）

		String pageStr=request.getParameter("page");
		String limitStr=request.getParameter("limit");

拿到这些参数后，我们可以进行sql分页查询
这里是使用的mybatis-plus 的分页插件进行了偷懒

@Controller
@RequestMapping("/admin")
public class LoginController {

    @Autowired
    UserService userService;

    @RequestMapping("/index")
    public String index(){
        return "fenye";
    }

    @RequestMapping("/fen")
    @ResponseBody
    public Map<String,Object> fen(@RequestParam(defaultValue="1")int page, @RequestParam(defaultValue="5")int limit){
        Page<User> page1 = new Page<>(page,limit);
        IPage<User> iPage = userService.page(page1, null);
        Map<String,Object> map=new HashMap<>();		//装填回调数据
        map.put("code", 0);
        map.put("msg", "随便写啥");
        map.put("count",iPage.getTotal());		//获得数据的总数
        map.put("data",iPage.getRecords());	//本次分页查询的数据
        return map;
    }
}

4.json格式

{
"code":0,
"msg":"随便写啥",
"count":1000,	//数据的总数 
"data":[	//本次分页查询的数据
{.....数据.....},
{.....数据.....}]