使用bootstrap-table表格插件实现表格

依赖的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>