layui实现数据分页功能_layui分页使用

最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染，因此和小伙伴一起学习了layui的数据表格渲染，然后进行了改进，成功之后记录了下来

先说前端HTML和js代码

    先下载layuijs文件，在页面引入layui的js

在HTML boday标签中添加table容器，id为demo

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 demo(){
	Test test=new Test();
	test.setField("userName");
	test.setTitle("名称");
	Test test2=new Test();
	test2.setField("realName");
	test2.setTitle("地址");
	ArrayList list=new ArrayList<>();
	list.add(test);
	list.add(test2);
	return list;
}

然后是进行分页test方法访问的接口

	@RequestMapping(value="/userlist", method = RequestMethod.GET)
  @ResponseBody
  public ResultMap> 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 userList=userservice.getUserList(dep, status, duty, relName, rowIndex, limit);
    List userListSize=userservice.getUserListSize(dep, status, duty, relName);  
    /*List allUserList =userservice.selectAllUser();*/
    UserManagerPage> userPage=new UserManagerPage>();
    userPage.setData(userList);
    userPage.setSize(limit);
    userPage.setPage(page);
    userPage.setSizeIndex(rowIndex);
    userPage.setCount(userListSize.size());
    return new ResultMap>(0,"",userList,100);
  }

其中 ResultMap的结构如下：

package com.mlt.util;



public class ResultMap  {



    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的分页数据渲染

layui实现数据分页功能_layui分页使用

相关推荐