前台使⽤Layui插件+后台SpringBoot框架，简单的动态表格，含分页
Part 1： ⼀些注意事项
1. 使⽤表格控件时，Layui 发给后台的数据是 page 和 limit
后台需要返回的格式举例 ：
{
“msg”: “”,
“code”: 0,
“data”: [
{
“id”: 1,
“age”: 20
}
],
“count”: 1
}
2. 使⽤分页功能的时候，前台使⽤Layui⾃带的der；后台使⽤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;
elem: '#test'              //你定义的table的名称
,url: "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]  //数据分页条
});
});
后端：
1. 先了解传给前台的参数之⼀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;
}
}
2. 传回的所有数据，再写个类：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) { unt = count;
this.msg = msg;
this.msg = msg;
this.data = data;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
}
public Integer getCode() {
return code;
}
public void setCode(Integer 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;
}
}
3. 最后⼀个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.setData(data);
return layuiData;                  //分页的写法详见我的另⼀篇博客
}
}
4. 其中⼀个repository是个interface：
public interface DataRepository  extends JpaRepository<User,Integer> {
}
5. 是不是很简单呢~

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