springboot+ajax向表格渲染数据
·
后端接口: springboot+mybatis+pageHelper
@RequestMapping(value = "/getUserinfo")
@ResponseBody
public List<AppUser> getSomePerson(@RequestParam(value = "pageNum",defaultValue="1") int pageNum,HttpServletRequest request ){
//pageNum:表示第几页 pageSize:表示一页展示的数据
PageHelper.startPage(pageNum,5);
List<AppUser> list=appUserServices.getAllUserInfo();
//将查询到的数据封装到PageInfo对象
PageInfo<AppUser> pageInfo=new PageInfo(list,5);
//分割数据成功
for (int i = 0; i < list.size(); i++) {
System.out.println(list.get(i));
}
request.setAttribute("userinfopage",pageInfo);
return list;
}
前端页面”：bootstrap+jqery
<script>
$(function (){
//请求信息
$.ajax({url:"/plat/getUserinfo",success:function(data){
var str = "";
console.log(data[0].appUserGroup.name);
console.log(data[0].id);
for (i in data) {
str+=" <tr>\n" +
" <td>"+(1+parseInt(i))+"</td>\n" +
" <td>"+data[i].userid+"</td>\n" +
" <td>"+(data[i].password==""?"无":"******")+"</td>\n" +
" <td>"+data[i].name+"</td>\n" +
" <td>"+data[i].appUserGroup.name+"</td>\n" +
" <td>"+(parseInt(data[i].status)==0?"有效":"无效")+"</td>\n" +
" <td><a href=\"#\">更换用户角色</a></td>\n" +
" <td><a href=\"#\">修改</a></td>\n" +
" <td><a href=\"#\">删除</a></td>\n" +
" </tr>";
}
$("#table_userinfo").append(str);
console.log(data);
}});
})
</script>
<body>
<div>
<!-- 表格 -->
<table class="table table-bordered" >
<tr>
<th>序号</th>
<th>账号</th>
<th>密码</th>
<th>姓名</th>
<th>部门</th>
<th>状态</th>
<th>用户角色</th>
<th>修改</th>
<th>删除</th>
</tr>
<tbody id="table_userinfo" class="table table-bordered">
</tbody>
</table>
</body>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)