项目组要求搭建一套springboot的开发环境,后端已搭建好,前端用bootstrap,写好页面以及js逻辑,启动发现bootStrapTable方法中的请求未被发送,经多方测试发现bootStrapTable调用必须放在body标签后面才可以,由此可见该方法必须在整个页面渲染结束后,即table被bootstrap渲染结束才能被调用。
代码如下:注意script标签位置,必须放在body之后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>归档记录</title>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/bootstrap/bootstrap-table/bootstrap-table.css" />
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<table id="table" data-toggle="table">
</table>
</body>
<script>
$('#table').bootstrapTable('destroy');
/*$(document).ready(function () {
$.ajax({
type: "POST",
url: "/user/selectAll",
dataType: "json",
data:{pageNum:1,pageSize:10},
success: function (msg) {
$("#table").bootstrapTable('load', msg);
},
error: function () {
alert("错误");
}
});
});*/
$('#table').bootstrapTable({
url: "/user/selectAll", //请求后台的URL
method: 'GET', //请求方式
striped: true, //行间隔色
cache: false, //缓存,默认为true,所以一般情况下需要设置一下这个属性
contentType: 'application/x-www-form-urlencoded',
pagination: true, //分页
paginationPreText: "上一页",
paginationNextText: "下一页",
sortable: false, //排序
sortOrder: "asc", //排序方式
singleSelect: true, //禁止多选
showRefresh: true, //刷新按钮
showColumns: true, //显示所有的列
detailFormatter: true,
minimumCountColumns: 3, //最少允许的列数
sidePagination: "server", //分页方式:client客户端分页,server服务端分页
queryParamsType: 'aaa', // undefined
clickToSelect: true, //是否启用点击选中行
queryParams: function (params) { //查询传递参数
var object = new Object();
object.pageNum = params.pageNumber;
object.pageSize = params.pageSize;
return object;
},
idField: 'userId', //指定主键列
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数
pageList: [10, 25, 50, 100], //可供选择的每页的行数
checkboxHeader: false,
columns: [{
field: 'userId',
width: '50px',
title: 'id',
align: 'center'
}, {
field: 'userName',
title: '用户名',
align: 'center'
}, {
field: 'address',
title: '地址',
align: 'center'
},{
field: 'sex',
title: '性别',
align: 'center'
},{
field: 'birthday',
title: '生日',
align: 'center'
}]
});
</script>
</html>