前台使用Layui插件+后台Spring Boot框架，简单的动态表格，含分页

Part 1： 一些注意事项

1. 使用表格控件时，Layui 发给后台的数据是 page 和 limit
   后台需要返回的格式举例 ：
   {
   “msg”: “”,
   “code”: 0,
   “data”: [
   {
   “id”: 1,
   “age”: 20
   }
   ],
   “count”: 1
   }

2. 使用分页功能的时候，前台使用Layui自带的table.render；后台使用Mybatis 的分页插件PageHelper，这个在我的另一篇文章里有详细介绍。要注意的是：即使是后台做了分页，比如10个数据分了2页，每页5个。后台发给前台的数据应该为：
   {
   “msg”: “”,
   “code”: 0,
   “data”: [
   {
   5组数据
   }
   ],
   "count": 10
   }
   这是我踩过的坑，希望大家注意。

Part 2： 上代码

前端：

html部分：


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]  //数据分页条
    	});
	});

后端：

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) {
   	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;
   	 }
   }
   

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 data = dataRepository.findAll();
    		int count = data.size();
   
   		 layuiData.setCount(count);
   		 layuiData.setCode(0);
   		 layuiData.getMsg();
   		 layuiData.setData(data);
    	 	 return layuiData;                   //分页的写法详见我的另一篇博客
    	}
    }
   

4. 其中一个repository是个interface：

     public interface DataRepository  extends JpaRepository {
    	}
   

5. 是不是很简单呢~