最近需要對後臺的資料進行分頁渲染並且需要進行表頭動態渲染，因此和小夥伴一起學習了layui的資料表格渲染，然後進行了改進，成功之後記錄了下來

先說前端HTML和js程式碼

1. <script src="/layui/layui.js"></script> 先下載layuijs檔案，在頁面引入layui的js

<table id="demo" lay-filter="test"></table>

在HTML boday標籤中新增table容器，id為demo

<script>
	$(function(){
		 getData();
	})
	function getData(){
		  $.ajax({  
		        type:'get',  
		        url:'interfaces/demo',  
		    	success:function(data){
					test("#demo",data,"/interfaces/userlist")
				} 
		    });  
	}
	function test(element,data,url){
		  debugger
	      var table = layui.table;
	      //第一個例項
	      table.render({
	        elem: '#demo'
	        ,height: 315
	        ,url: '/interfaces/userlist' //資料介面
	        ,page: true //開啟分頁
	        ,cols: [
	        	data
	        	]
	      });
	      
	}
	
	 layui.use('table', test());
	</script>
 

js程式碼中test方法的element為HTML程式碼中boday容器的id url為請求資料的後臺地址，page屬性為是否開啟分頁，cols中放的是getData中返回的表頭資訊的json陣列
getData為獲取動態表頭，其中返回的資料格式為一個json陣列，其中格式如下： field 和title 兩個欄位不能更改這個是表頭的資料格式 

[{
		field: "id",
		title: 'ID'
	},
	{
		field: "name",
		title: 'mingcheng'
	},
	{
		field: "addess",
		title: 'dizhi'
	}]

layui.use('table', test()); 為進行layui分頁
 

然後是後臺介面程式碼，我在這裡只是寫了一個樣例 

先說的是js程式碼getData訪問的介面返回的資料

@RequestMapping("/interfaces/demo")
	@ResponseBody
	public List<Test> demo(){
		Test test=new Test();
		test.setField("userName");
		test.setTitle("名稱");
		Test test2=new Test();
		test2.setField("realName");
		test2.setTitle("地址");
		ArrayList<Test> list=new ArrayList<>();
		list.add(test);
		list.add(test2);
		return list;
	}
 

然後是進行分頁test方法訪問的介面

	@RequestMapping(value="/userlist", method = RequestMethod.GET)
	  @ResponseBody
	  public ResultMap<List<Users>> getUserList(@RequestParam(value="dep", required=false ,defaultValue="0") int  dep,
	      @RequestParam(value="status", required=false,defaultValue="-1") int  status,
	      @RequestParam(value="duty", required=false,defaultValue="0") int  duty,
	      @RequestParam(value="relName", required=false,defaultValue="") String  relName,
	      @RequestParam(value="page", required=false,defaultValue="1") int  page,
	      @RequestParam(value="limit", required=false,defaultValue="10") int  limit) {
	    int rowIndex=(page - 1)*limit;
	    List<Users> userList=userservice.getUserList(dep, status, duty, relName, rowIndex, limit);
	    List<Users> userListSize=userservice.getUserListSize(dep, status, duty, relName);  
	    /*List<Users> allUserList =userservice.selectAllUser();*/
	    UserManagerPage<List<Users>> userPage=new UserManagerPage<List<Users>>();
	    userPage.setData(userList);
	    userPage.setSize(limit);
	    userPage.setPage(page);
	    userPage.setSizeIndex(rowIndex);
	    userPage.setCount(userListSize.size());
	    return new ResultMap<List<Users>>(0,"",userList,100);
	  }

其中 ResultMap的結構如下： 

package com.mlt.util;

public class ResultMap <T> {

    private String msg;
    
    private int code;
    
    private T data;
    
    private int count;
    
    
    


	public ResultMap() {
    	super();
    }
    
    public ResultMap(int code,String message) {
    	super();
    	this.code=code;
    	this.msg=message;
    }
    
    public ResultMap(int code,String message,T data,int count) {
    	super();
    	this.code=code;
    	this.msg=message;
    	this.data=data;
    	this.count=count;
    }
    
    
    public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public int getCount() {
		return count;
	}

	public void setCount(int count) {
		this.count = count;
	}

	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}

	public T getData() {
		return data;
	}

	public void setData(T data) {
		this.data = data;
	}
    
    
    
}

其中的code值一定要為0，這個坑我和小夥伴用一下午才爬上來（layui官網沒查到對這個有特別要求，但是隻有0才能進行資料渲染） 具體資料格式如下：其中count 為資料的總條數，分頁的時候用到，data為一個json陣列

data中userName 和 address 要和getData獲取表頭json資料中filed的value值一樣

{
  "count": 100,
  "code": 0,
  "msg": null,
  "data": [
    {
      "userName": "張三",
      "address": 中國,
    }
  ]
}

完成以上工作就可以進行layui的分頁資料渲染