bootstrap table前端导出

1. 引入相关js包;

bootstrap table前端导出

2. bootstrap table配置导出属性;

bootstrap table前端导出

3. 实现效果;

bootstrap table前端导出

上代码:

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;
    }