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 getUserList(){
        System.out.println(userDao.getUserList().get(1));
        return userDao.getUserList();
    }
}

　　实体类：

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 +
                '}';
    }
}

View Code

　　jsp：

<%--
  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>

View Code