依赖的jar包
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table/src/bootstrap-table.css">
<script src="/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/src/bootstrap-table.js"></script>
在body中定义table所在位置 和toobar所在位置
//表格主体
<table id="table"></table>
//toobar主体
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>修改学生信息
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除学生信息
</button>
</div>
table的初始化js
<script type="text/javascript">
$('#table').bootstrapTable({
url: '/studentInfo/listStudentInfo',
method: 'post',
dataType: 'json',
height: 560,
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
pagination: true, //是否显示分页(*)
maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true, //设置为 true启用 全匹配搜索,否则为模糊搜索
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "studentID", //每一行的唯一标识,一般为主键列\
sortStable: true,
columns: [
{checkbox: true},
{field: 'studentID', title: '学号'},
{field: 'name', title: '姓名'},
{field: 'sex', title: '性别'},
{field: 'college', title: '学院'},
{field: 'majorName', title: '专业名称'},
{field: 'adminClass', title: '行政班'},
{field: 'birthDate', title: '出生年月'},
{field: 'politicsStatus', title: '政治面貌'},
{field: 'nation', title: '民族'},
{field: 'areaSource', title: '来源地区'},
{field: 'enrollmentDate', title: '入学日期'},
{field: 'graduationMiddleSchool', title: '毕业中学'},
{field: 'phone', title: '联系电话'},
{field: 'idNumber', title: '身份证号'},
{field: 'sourceProvince', title: '来源省'},
{field: 'language', title: '主修外语语种'}
],
});
</script>