Part 1: 一些注意事项
-
使用表格控件时,Layui 发给后台的数据是 page 和 limit
后台需要返回的格式举例 :
{
“msg”: “”,
“code”: 0,
“data”: [
{
“id”: 1,
“age”: 20
}
],
“count”: 1
} -
使用分页功能的时候,前台使用Layui自带的table.render;后台使用Mybatis 的分页插件PageHelper,这个在我的另一篇文章里有详细介绍。要注意的是:即使是后台做了分页,比如10个数据分了2页,每页5个。后台发给前台的数据应该为:
{
“msg”: “”,
“code”: 0,
“data”: [
{
5组数据
}
],
"count": 10
}
这是我踩过的坑,希望大家注意。
Part 2: 上代码
前端:
html部分:
<table class="layui-hide" id="test"></table>
js部分:
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test' //你定义的table的名称
,url: "http://127.0.0.1:8080/user"
,method:"post"
,cols: [[
,{field:'id', title:'id'}
,{field:'name', title:'name'}
,{field:'age', title:'age'}
]]
,page:true
,limit:10 //默认的话是10
,limits:[10,20,30,50] //数据分页条
});
});
后端:
-
先了解传给前台的参数之一data 本质是个list
//建个User类User.Java: @Entity public class User { @Id @GeneratedValue private Integer id; private String name; private Integer age; public User() { } public User(Integer id,Integer age) { this.id = id; this.name = name; this.age = age; } public Integer getId() { return id; } public void setId() { this.id = id; } public String getName() { return name; } public void setName() { this.name = name; } public Integer getAge() { return age; } public void setAge() { this.age=age; }
}
-
传回的所有数据,再写个类:LayuiData.Java:
public class LayuiData { private Integer count; private Integer code; private String msg; private List data; public LayuiData(){ } public LayuiData(Integer count, Integer code, String msg, List data) { this.count = count; this.code = code; this.msg = msg; this.data = data; } public Integer getCount() { return count; } public void setCount(Integer count) { this.count = count; } public Integer getCode() { return code; } public void setCode(Integer code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public List getData() { return data; } public void setData(List data) { this.data = data; } }
-
最后一个controller:
@CrossOrigin(origins = "*", maxAge = 3600) //这是跨域,有的小伙伴可能没有这个问题 @RestController public class UserController { @Autowired DataRepository dataRepository; @PostMapping(value = "/user") @ResponseBody public Object back(@RequestParam("page") int page, @RequestParam("limit") int limit) { LayuiData layuiData=new LayuiData(); List<User> data = dataRepository.findAll(); int count = data.size(); layuiData.setCount(count); layuiData.setCode(0); layuiData.getMsg(); layuiData.setData(data); return layuiData; //分页的写法详见我的另一篇博客 } }
-
其中一个repository是个interface:
public interface DataRepository extends JpaRepository<User,Integer> { }
-
是不是很简单呢~