springboot+bootstrap+ajax表格显示
记录一下bootstrap前后端传参方式
基础环境:
Idea2018.3.2
maven3.6.1
jsp
js,ajax
Springboot
代码:
js
$(document).ready(function() { initUserTable(); function initUserTable(){ $('#userTable').bootstrapTable({ url:"/userController/getUserList", method:"post", striped:true, contentType: "application/json",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理 dataType: "json",//期待返回数据类型 responseHandler:function (res) { return res; }, columns:[ { field:"id", title:"ID", visible: false },{ field:"account", title:"账号" },{ field:"name", title:"名字" },{ field:"age", title:"年龄" },{ field:"sex", title:"性别" },{ field:"lastChangeTime", title:"最后一次修改时间" },{ field:"createTime", title:"创建时间" } ] }) } })
Controller:
package com.example.demo.controller; import com.example.demo.Dao.UserDao; import com.example.demo.entity.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import java.util.Date; import java.util.List; @Controller public class UserController { @Autowired UserDao userDao; @RequestMapping(value="/userController/getUserList",method = RequestMethod.POST) @ResponseBody public List<User> getUserList(){ System.out.println(userDao.getUserList().get(1)); return userDao.getUserList(); } }
实体类:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package com.example.demo.entity; import org.springframework.data.annotation.Id; import org.springframework.data.mongodb.core.mapping.Document; import org.springframework.data.mongodb.core.mapping.Field; import java.util.Date; @Document(collection = "user_info") public class User { @Id private String id; @Field("account") private String account; @Field("password") private String password; @Field("name") private String userName; @Field("age") private Integer age; @Field("sex") private String sex; @Field("last_change_time") private Date lastChangeTime; @Field("create_time") private Date createTime; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getAccount() { return account; } public void setAccount(String account) { this.account = account; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public Date getLastChangeTime() { return lastChangeTime; } public void setLastChangeTime(Date lastChangeTime) { this.lastChangeTime = lastChangeTime; } public Date getCreateTime() { return createTime; } public void setCreateTime(Date createTime) { this.createTime = createTime; } @Override public String toString() { return "User{" + "id='" + id + '\'' + ", account='" + account + '\'' + ", password='" + password + '\'' + ", userName='" + userName + '\'' + ", age=" + age + ", sex='" + sex + '\'' + ", lastChangeTime=" + lastChangeTime + ", createTime=" + createTime + '}'; } }
jsp:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%-- Created by IntelliJ IDEA. User: HP Date: 2019/7/5 Time: 9:24 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用户列表</title> </head> <body> <table id="userTable" border="1"> </table> </body> <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <link href="/static/bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="stylesheet"> <script type="text/javascript" src="/static/jquery-3.4.1/jquery-3.4.1.js"></script> <script type="text/javascript" src="/static/jquery-3.4.1/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script type="text/javascript" src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/bootstrap-table-master/dist/bootstrap-table.js"></script> <script type="text/javascript" src="/static/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"></script> <script type="text/javascript" src="/static/js/userList.js"></script> </html>