bootstrap-table 组件导出功能配合PageHelper使用

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的流程获取分页数据

猜你喜欢

转载自blog.csdn.net/qq_36877441/article/details/89396896