bootstrap table表格不显示数据
问题遇到的现象和发生背景
SpringBoot 查询到mysql数据，用bootstrap table表格渲染不显示数据，请大家帮忙看看，谢谢
问题相关代码，请勿粘贴截图
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-table使用title>
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<script src="js/jquery.js">script>
<script src="js/bootstrap-table/bootstrap-table.min.js">script>
<script src="js/bootstrap-table/bootstrap-table-zh-CN.js">script>
head>
<body>
<table id="tb_departments" data-toggle="table">table>
body>
<script type="text/javascript">
$(function(){
var oTable = TableInit();
oTable.Init();
});
function TableInit() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$('#tb_departments').bootstrapTable({
url: "stu",
pagination: true, //分页
search: false, //显示搜索框
sidePagination: "server", //服务端处理分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
responseHandler:function(res) {
return {
"total":res.total, //总页数
"rows": res.data //数据
}
},
columns: [
{
title: '序号', //标题 可不加
width:'64px',
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {
return index+1;
}
},
{
title: '姓名',
field: 'sname',
align: 'center',
valign: 'middle',
},
{
title: '性别',
field: 'ssex',
align: 'center',
valign: 'middle',
},
{
title: '年龄',
field: 'sage',
align: 'center',
valign: 'middle',
},
{
title: '唯一标识',
field: 'sid',
align: 'center',
valign: 'middle',
}
]
});
};
return oTableInit;
};
function selBycondition(){
var url = "/test/getPage?name=aaa";
$("#tb_departments").bootstrapTable('refresh',{'url':url});
}
script>
html>
package com.example.demo.controller;
import com.example.demo.entity.Student;
import com.example.demo.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
public class StudentController {
@Autowired
StudentService studentService;
@RequestMapping("/stu")
public Map findAll(){
List list = studentService.findAll();
Map map = new HashMap();
map.put("total",list.size());
map.put("rows",list);
return map;
}
}
package com.example.demo.service;
import com.example.demo.entity.Student;
import com.example.demo.mapper.StudentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class StudentService {
@Autowired
private StudentMapper studentMapper;
public List findAll(){
return studentMapper.findAll();
}
}
bootstrap.min.css 没引入成功 。可能是 路径错了 。
其次 你需要 responseHandler 打印一下 res看看是否 请求到数据了
bootstrap_table页面配置的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script language="JavaScript">
const TableInit = function () {
const oTableInit = {};
//初始化Table
oTableInit.Init = function () {
$('#bootstrap_table').bootstrapTable({
url: '/stu', //请求后台的URL（*）
method: 'get', //请求方式（*）
async: true, //true表示执行到这,ajax向后台发起访问,在等待响应的这段时间里,继续执行下面的代码
//设置为true,基本都是后面的代码(除非还有ajax)先执行
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
paginationPreText:'<', //上一页按钮样式
paginationNextText:'>', //下一页按钮样式
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
contentType: "application/x-www-form-urlencoded", //重要选项,必填
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
// height: 700, //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度,最好不要设置这个属性
uniqueId: "yes", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
field: 'sid',
title: 'ID',
editable: {
mode: 'inline'
}
}, {
field: 'sname',
title: '用户名'
}, {
field: 'sage',
title: '年龄'
}, {
field: 'ssex',
title: '性别'
}
],
rowStyle: function (row, index) {
const classesArr = ['success', 'info'];
let strclass = "";
if (index % 2 === 0) {//偶数行
strclass = classesArr[0];
} else {//奇数行
strclass = classesArr[1];
}
return {classes: strclass};
},//隔行变色
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
const temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
start: 1,//params.start
limit: params.limit, //params.limit, 页面大小
sid:"01",
testNum: 445,
testNum1: 343
};
return temp;
};
return oTableInit;
};
$(function () {
//1.初始化Table
const oTable = new TableInit();
oTable.Init();
});
</script>
<title>bootstrap_table 表格</title>
</head>
<body>
<div class="container">
<table id="bootstrap_table"></table>
</div>
</body>
</html>
StudentMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.StudentMapper">
<select id="findAll" resultType="com.example.demo.entity.Student">
select * from student order by sid asc limit #{start} , #{limit};
</select>
<select id="findOne" parameterType="String" resultType="com.example.demo.entity.Student">
select * from student where sid = #{sid};
</select>
<select id="findByUserId" parameterType="String" resultType="com.example.demo.entity.Student">
select * from student where sid = #{sid};
</select>
</mapper>