大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了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的分页数据渲染
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/207470.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...