说明一点，本文借鉴别人的分享资料，只为共享知识，我是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