1. 引入相关js包;
2. bootstrap table配置导出属性;
3. 实现效果;
上代码:
var queryParams = {};
$("#carPctTable").bootstrapTable('destroy').bootstrapTable({
method: 'post', // 服务器数据的请求方式 get or post
url: prefix + "/getRunCarDay", // 服务器数据的加载地址
iconSize: 'outline',
toolbar: '#exampleToolbar',
striped: true, // 设置为true会有隔行变色效果
dataType: "json", // 服务器返回的数据类型
pagination: true, // 设置为true会在底部显示分页条
singleSelect: false, // 设置为true将禁止多选
pageSize: 7, // 如果设置了分页,每页数据条数
pageNumber: 1, // 如果设置了分布,首页页码
pageList: [7, 15, 30],
showColumns: false, // 是否显示内容下拉框(选择显示的列)
columns: getColumns(1),
sidePagination: "client", // 设置在哪里进行分页,可选值为"client"
paginationShowPageGo: true,
smartDisplay: false,
toolbarAlign: 'right',
showExport: true, //是否显示导出
buttonsAlign: "right", //按钮位置
exportDataType: "all", //basic', 'all', 'selected'
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],//导出格式
exportOptions: {
fileName: '每天车辆运营占比',//下载文件名称
worksheetName: '每天车辆运营占比', //表格工作区名称
tableName: '每天车辆运营占比',
},
onClickRow: function (row, $element) {
$('.select-row').removeClass('select-row');
$($element).addClass('select-row');
},
queryParams: function (params) {
queryParams.pageSize = params.limit;
queryParams.offset = params.offset;
//queryParams.sort = params.sort; // 排序列名
//queryParams.sortOrder = params.order; // 排位命令(desc,asc)
return queryParams;
}