前端代码:注意先引入bootstrap和tablle需要的css以及js文件，注意表格命名一个id，本table名为project_table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>万里哥的系统</title> <link rel="stylesheet" href="${request.contextPath}/statics/js/lib/bootstrap-3.3.7/css/bootstrap.css"> <link rel="stylesheet" href="${request.contextPath}/statics/js/lib/bootstrap-table/bootstrap-table.css"> <link rel="stylesheet" href="${request.contextPath}/statics/css/base.css"> <link rel="stylesheet" href="${request.contextPath}/statics/css/project.css"> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fEW9yTlMIinhZKYcVcRwQKHU"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <script src="${request.contextPath}/statics/js/baidu.js"></script> <script src="${request.contextPath}/statics/js/laydate.js"></script> <script src="${request.contextPath}/statics/js/lib/jquery-2.1.1.min.js"></script> <script src="${request.contextPath}/statics/js/lib/bootstrap-3.3.7/js/bootstrap.js"></script> <script src="${request.contextPath}/statics/js/lib/bootstrap-table/bootstrap-table.js"></script> <script src="${request.contextPath}/statics/js/lib/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <script src="${request.contextPath}/statics/js/lib/echarts.min.js"></script> <script src="${request.contextPath}/statics/js/bootstraptable.js"> </script> </head> <body> <div class="content"> <div class="content_middle"> <div class="m_right"> <div class="right_query"> <span>年份：</span> <select id="project_query_year"> <option value=''></option> <option value=''></option> <option value=''></option> <option value=''></option> </select> <span>查询日期：</span> <input type="text" class="day-input" placeholder="请选择日期" id="test6"> <span>关键字：</span> <input type="text" id="project_query_name" placeholder="请输入项目名称关键字"> <button id="project_query_btn">查询</button> <iframe id="iframe1" style="display: none"></iframe> <button id="project_print_btn">打印</button> <button id="project_export_btn">导出</button> </div> <div class="right_table"> <table id="project_table" class="table"> </table> </div> </div> </div> </div> </body> </html>
Js代码：注意事项columns的field属性要与接口返回的数据大小写一致，不然就会报错为空，查无数据。BootStrapTable要求真的很严格。
$(document).ready(function() { initDatagrid(); }); //初始化表格 function initDatagrid() { var year = 2020; $('#project_table').bootstrapTable({ url : 'electricity/getProjectList', //请求后台的URL（*） method : 'get', //请求方式（*） queryParams : function(params) { return { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 offset: params.offset, limit: params.limit, year: year } }, triped : true, //是否显示行间隔色 cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination : true, //是否显示分页（*） sortable : false, //是否启用排序 sortOrder : "asc", //排序方式 sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber : 1, //初始化加载第一页，默认第一页 pageSize : 10, //每页的记录行数（*） search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 contentType : "application/x-www-form-urlencoded", strictSearch : true, showColumns : true, //是否显示所有的列 showRefresh : true, //是否显示刷新按钮 minimumCountColumns : 2, //最少允许的列数 clickToSelect : true, //是否启用点击选中行 height : 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId : "no", //每一行的唯一标识，一般为主键列 showToggle : true, //是否显示详细视图和列表视图的切换按钮 cardView : false, //是否显示详细视图 detailView : false, //是否显示父子表 responseHandler : function(res) { //将服务端你的数据转换成bootstrap table 能接收的类型 return { "total" : res.total,//总页数 "rows" : res.records //数据 }; }, columns: [{ radio : true },{ field: 'ID', title: 'Item ID' }, { field: 'YEAR', title: '年份' }, { field: 'NUM_COMPARE', title: '数量同比' },{ field: 'PRODUCE', title: '本月生产用电' },{ field: 'LIVE', title: '本月生活用电' }], onLoadSuccess : function(data) { $('#datagrid').bootstrapTable('uncheckAll') }, onCheck : function(row) { //清除地图上的overlay var map = baiduMapModule.getMap(); map.clearOverlays(); } }); }
Mapper文件：注意resultType为Map，则返回接口数据字段与数据库字段一致。
<select id="getAll" resultType="java.util.HashMap"> select id,year,month,num_Compare,produce,live from ene_electricity <if test="year!=null and year!=''"> where year = #{year} </if> </select>
后台代码：利用mybatis-plus插件自动分页
//分页查询接口 @RequestMapping("/getProjectList") @ResponseBody public Page getProjectList(HttpServletRequest request) { int offset = Integer.parseInt(request.getParameter("offset")); int limit = Integer.parseInt(request.getParameter("limit")); String yearStr = request.getParameter("year"); Integer year = null; if(yearStr!=null){ year = Integer.parseInt(yearStr); } Page page = new Page<>(offset / limit + 1, limit); Page projectWinInfoList = (Page) electricityDao.getAll(page,year); return projectWinInfoList; }
效果：
