1.导入相应的bootstrap,bootstrap-table的包
2.正常页面示意图
3.jsp页面源码
<html><head><title>管理员信息管理</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css"><link href="${pageContext.request.contextPath }/css/simple-sidebar.css" rel="stylesheet"><!--重要--><script src="${pageContext.request.contextPath }/bootstrap/js/jquery.min.js"></script><script src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="src/bootstrap-table.js"></script><script src="src/locale/bootstrap-table-zh-CN.js"></script><script src="js/moment-with-locales.js"></script><link rel="stylesheet" href="src/bootstrap-table.css"><link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" /><script src="js/bootstrap-datetimepicker.min.js"></script></head><body><div id="wrapper" class="toggled"><div id="page-content-wrapper" style="margin-top:70px"><div class="container-fluid"><h3>进账管理</h3><hr><div style="margin-bottom:20px;"><button class="btn btn-outline btn-primary" type="button" data-toggle="modal" data-target="#mymodal3">进账</button></div><div class="panel panel-primary"><div class="panel-body"><table width="100%" class="table table-bordered table-hover" id="account-table"></table><script type="text/javascript">var $table;var queryUrl = './home/income_query.action';$table = $('#account-table').bootstrapTable({url: queryUrl, // 请求后台的URL（*）method: 'post', // 请求方式（*）contentType: "application/x-www-form-urlencoded",striped: false, // 是否显示行间隔色cache: false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pagination: true, // 是否显示分页（*）sortable: false, // 是否启用排序sortOrder: "desc", // 排序方式sidePagination: "server", // 分页方式：client客户端分页，server服务端分页（*）pageNumber: 1, // 初始化加载第一页，默认第一页pageSize: 10, // 每页的记录行数（*）pageList: [10], // 可供选择的每页的行数（*）search: false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大strictSearch: true,showColumns: false, // 是否显示所有的列showRefresh: false, // 是否显示刷新按钮minimumCountColumns: 2, // 最少允许的列数clickToSelect: false, // 是否启用点击选中行// height: 641, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度uniqueId: "id", // 每一行的唯一标识，一般为主键列showToggle: false, // 是否显示详细视图和列表视图的切换按钮cardView: false, // 是否显示详细视图detailView: false, // 是否显示父子表// 得到查询的参数queryParams: function (params) {// 这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的return {limit: params.limit, // 页面大小page: (params.offset / params.limit) + 1 // 页码};},columns: [{title: '序号',width: 120,align: 'center',valign: 'middle',formatter: function (value, row, index) {return index + 1;}},{field: 'money',title: '金额'},{field: 'time',title: '时间',formatter: function (value, row, index) {return value.replace("T00:00:00", "");}},{field: 'note',title: '备注'},{field: 'id',title: '操作',width: 250,align: 'center',valign: 'middle',formatter: actionFormatter}],onLoadSuccess: function (data) {console.log(data);},onLoadError: function () {alert("加载失败");}});//操作栏格式化function actionFormatter(value, row, index) {var id = value;var result = "";result += "<a href='javascript:;' class='btn' οnclick=\"UpdateView('" + id + "')\" title='修改'>修改</a>";result += "<a href='javascript:;' class='btn' οnclick=\"DeleteView('" + id + "')\" title='删除'>删除</a>";return result;}</script></body></html>
