说明一点，本文借鉴别人的分享资料，只为共享知识，我是java共享者，共创java未来！！
1.首先要下载相关文件
2.引入jsp如下：
<link rel="stylesheet" type="text/css" href="http://localhost:8080/SSMTest/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/SSMTest/bootstrap/bootstrap-table.css">
<!-- 引入bootstrap和bootstrap-table文件 -->
<!-- 我理解的父级目录是:类似与此的：http://localhost:8080/SSMTest/book/list
那么list.jsp的父级目录就是book,那么book下的子目录就是bootstrap -->
<!-- jquery第 -->
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/jquery-2.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/bootstrap-table.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/bootstrap-table-zh-CN.js" charset="utf-8"></script>
<!-- request.getContextPath():返回站点的根目录：自己的js引入 -->
<script type="text/javascript" src="<%=request.getContextPath() %>/bootstrap/list1.js"></script>
3.编辑jsp：
在body里面添加:<table id="table"></table>
4.编辑js:
$(function() {
// 1.初始化Table
var oTable = new TableInit();
oTable.Init();
});
var TableInit = function() {
var oTableInit = new Object();
// 初始化Table
oTableInit.Init = function() {
$(‘#table‘).bootstrapTable({
url : ‘http://localhost:8080/SSMTest/data/data2.json‘, // 请求后台的URL（*）
method : ‘get‘, // 请求方式（*）
striped : true,// 是否显示行间隔色
search : true,
showRefresh : true,
showColumns : true, // 是否显示所有的列
showRefresh : true, // 是否显示刷新按钮
minimumCountColumns : 2, // 最少允许的列数
clickToSelect : true, // 是否启用点击选中行
height : 700, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId : "no", // 每一行的唯一标识，一般为主键列
showToggle : true, // 是否显示详细视图和列表视图的切换按钮
cardView : false, // 是否显示详细视图
detailView : false, // 是否显示父子表
columns : [ {
field : ‘ID‘,
title : ‘ID‘
}, {
field : ‘Name‘,
title : ‘名字‘
}, {
field : ‘Sex‘,
title : ‘性别‘
}, {
field : ‘operate‘,
title : ‘操作‘,
formatter : operateFormatter
// 自定义方法，添加操作按钮
}, ]
});
};
// 得到查询的参数
oTableInit.queryParams = function(params) {
var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit : params.limit, // 页面大小
offset : params.offset
};
return temp;
};
return oTableInit;
};
function operateFormatter(value, row, index) {// 赋予的参数
return [ ‘<a class="btn active disabled" href="#">编辑</a>‘,
‘<a class="btn active" href="#" >档案</a>‘,
‘<a class="btn btn-default" href="#">记录</a>‘,
‘<input type="button" id="dangan" value="准入">‘ ].join(‘‘);
}
5.最重要的是URL中data的引入：
如果出现问题，比如说：data文件引入出现404；那么我出现的问题是SSM框架下，调用controller时发生的路径问题，
那么，我的解决方法是：设置绝对路径，这样就不用怕了，
原文链接：https://blog.csdn.net/qq7758521fang/article/details/81152219
原文：https://www.cnblogs.com/bcsdn/p/10887782.html