1.加载表格
页面引入js
<script src="../assets/bootstrap/js/bootstrap-table.js"></script>
<script src="../assets/bootstrap/js/export/bootstrap-table-export.js"></script>
<script src="../assets/bootstrap/js/export/tableExport.js"></script>
<script src="../assets/bootstrap/js/export/xlsx.core.min.js"></script>`
js下载地址:
https://github.com/hhurz/tableExport.jquery.plugin
https://github.com/wenzhixin/bootstrap-table/blob/master/src/extensions/export/bootstrap-table-export.js
$("#attendanceList").bootstrapTable({
url: "/attendance/queryAttendancePageListByServerId?serverId="+serverId,
method: "get",
contentType : "application/json",
striped: true,
cache: false,
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: function (params){
return { // (手动修改了bootstrap-table.js,'limit'也可以获取pageNumber)
pageSize: params.limit, // 每页要显示的数据条数 xportDataType:'all'时执行导出功能,limit为空
pageNumber: params.pageNumber
}
},
onLoadError: function(status){ //加载失败时执行
layer.msg("数据加载失败,请重试!", {icon: 2, time: 2000});
},
queryParamsType : "limit", //默认为'limit',设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder ,设置为limit可以获取limit, offset, search, sort, order
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [5, 10, 15], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: false,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
exportDataType: 'all',//导出文件方式 支持: 'basic', 'all', 'selected'. basic:本页数据,all,获取服务器所有数据,selected,本页选择行数据
showExport: true,
buttonsAlign: 'right',
exportTypes: ['excel','xlsx'],
icons:'glyphicon-export',
exportOptions: {
fileName: '学生考勤表',
worksheetName: 'sheet1',
tableName: '学生考勤表',
excelstyles: ['background-color','color','font-size','font-weight'],
onMsoNumberFormat: DoOnMsoNumberFormat
},
columns: myColumn,
smartDisplay:false
});
2.修改bootstrap-table.js源码
在js文件中搜索: this.options.queryParamsType === ‘limit’ ,在对应代码块里面添加 params.pageNumber ,并将其赋值params.pageNumber = this.options.pageNumber;
3.java后台
判断页码参数是否为空,为空时取全部数据返回total,rows;
不为空按照pageHelper的流程获取分页数据