1、HTML页面需要有一个表格标签，引入js，css：
<table id="data" class="table table-bordered table-hover"></table>
<link rel="stylesheet" href="../../../static/lib/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../static/lib/js/bootstrap-table.min.css">
<script src="../../../static/lib/js/jquery-3.2.1.min.js"></script>
<script src="../../../static/lib/js/bootstrap.min.js"></script>
<script src="../../../static/lib/js/bootstrap-table.min.js"></script>
<script src="../../../static/lib/js/locale/bootstrap-table-zh-CN.min.js"></script>
初始化表格：（ajax请求时，后台直接将数据全部以json格式返回即可，此种方法是客户端进行分页）
//初始化表格
$('#data').bootstrapTable({
//url: "http://192.168.25.167:8080/admin/getstuList", //请求后台的URL（*）
url:"/teacher/data/data_ergodic",
method: 'POST', //请求方式（*）
//toolbar: '#toolbar', //工具按钮用哪个容器
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 5, //每页的记录行数（*）
pageList: [5,10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索
strictSearch: true,
showColumns: true, //是否显示所有的列（选择显示的列）
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: false, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return temp;
},
columns: [{
field: 'id',
title: '序号',
align: 'center'
}, {
field: 'data_name',
title: '资料名称',
align: 'center'
}, {
field: 'data_type',
title: '资料类型',
align: 'center'
}, {
field: 'data_size',
title: '资料大小',
align: 'center'
}, {
field: 'create_time',
title: '创建时间',
align: 'center'
},{
field: 'update_time',
title: '更新时间',
align: 'center'
},{
field: 'oper',
title: '操作',
align: 'center',
events: actionCalssEvents,
formatter:function(value,row,index){
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var name=row.data_name;
var type=row.data_type;
var id=row.id
var a = '<a href="/teacher/data/data_download?name='+name+'&type='+type+'" style="background-color: #00a0e8">下载</a> <a class="edit" data-toggle="modal">编辑</a> <a class="del" name="del">删除</a>';
return a; }
}],
pagination:true
});
image.png
注意：表格操作事件的代码必须放在表格初始化之前，否则表格无法显示（也就是下边的这段代码必须放在上边的代码前边）。
//表格操作
window.actionCalssEvents={
'click .edit':function (e,value,row) {
var id=row.id
var type=row.data_type;
var name=row.data_name;
$("#oriname").text(name)
$("#id").text(id)
$("#type").text(type)
$("#myModal").modal({
show:true
})
},
'click .del':function (e,value,row) {
var result=confirm("确认删除？")
if (result==true){
var id=row.id
var type=row.data_type;
var name=row.data_name;
$.ajax({
type: "post",
url: "/teacher/data/data_delete",
data: {id:id,name:name,type:type},
dataType: "JSON",
success:function(data){
alert(data.msg)
window.location.reload()
},
error:function () {
alert(data.code)
}
});
}else {
return
}
}
}
效果图：
image.png
