layui实现数据分页功能_layui分页使用
大家好，又见面了，我是你们的朋友全栈君。
最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染，因此和小伙伴一起学习了layui的数据表格渲染，然后进行了改进，成功之后记录了下来
先说前端HTML和js代码
<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的分页数据渲染
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/207470.html原文链接：https://javaforall.cn
腾讯云开发者
