BootStrap Table 服务端分页+动态表头

1.问题

（1）由于之前的页面分页是客服端分页，当数据较多时，后台查询较慢，固需要做成服务端分页。
（2）然而表格表头是后台数据解析组装而成的，对于服务端分页来说，无疑需要请求到数据后解析数据来组装表头
（3）踩坑：先前的表头是请求到数据解析组装的，服务端分页又需要先拿到表头，固会造成请求完数据组装好表头后数据渲染不上去的情况，因为先前的表头是空的，并不会因为你请求完数据解析组装好表头而改变，可能有重新初始化表头的方法，但暂时没找到，所以用了其它方案。
方案1：若表头是相对固定的，则提前组装好表头再初始化表格。
方案2（略）：若表头是不固定的，则需要在渲染表格前先从后端拿到封装好的表头。

2.方案

2.1方案1

对于我这个项目，需要根据日、月、年类型来切换表头，而表头又是相对固定的，所以可以提前封装好表头。

日：

月

年

封装表头

// 获取表头结构
function getColumnsArray (reportTypeFlag) {
    // 公共部分
    let columnsArray = [
        {
            title: '监测点',
            field: '监测点',
            width: 260,
            align: 'center',
            valign: 'middle',
        },
        {
            title: '总用量',
            field: '总用量',
            width: 100,
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                if (value)
                    return value;
                else
                    return '0';
            },
        },
        {
            title: '折标煤',
            field: '折标煤',
            width: 100,
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
                if (value)
                    return value;
                else
                    return '0';
            },
        },
    ]

    // 封装部分
    switch (reportTypeFlag) {
        case "day":
            for (let i = 0; i < 24; i++) {
                columnsArray.push({
                    title: `${i < 10 ? '0' + i : i}:00`,
                    field: `${i < 10 ? '0' + i : i}:00`,
                    width: 100,
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if (value)
                            return value;
                        else
                            return '0';
                    },
                });
            }
            break;
        case "month":
            let year = $('#dateMonth').val().substr(0, 4)
            let month = $('#dateMonth').val().substr(5, 7)
            let dayNum = new Date(year, month, 0).getDate()
            console.log(year, month, dayNum)
            for (let i = 1; i <= dayNum; i++) {
                columnsArray.push({
                    title: `${year}-${month}-${i < 10 ? '0' + i : i}`,
                    field: `${year}-${month}-${i < 10 ? '0' + i : i}`,
                    width: 100,
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if (value)
                            return value;
                        else
                            return '0';
                    },
                });
            }
            break;
        case "year":
            let years = $('#dateYear').val()
            console.log(years)
            for (let i = 1; i <= 12; i++) {
                columnsArray.push({
                    title: `${years}-${i < 10 ? '0' + i : i}`,
                    field: `${years}-${i < 10 ? '0' + i : i}`,
                    width: 100,
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if (value)
                            return value;
                        else
                            return '0';
                    },
                });
            }
            break;
        default:
            break;
    }
    console.log(columnsArray)
    return columnsArray
}

初始化表格

// 初始化表格
function init(reportTypeFlag) { // reportTypeFlag 时间类型=
        let option = {
            url: "...",
            method: '...',
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

            pagination: true,                   //是否显示分页（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 30, 50],        //可供选择的每页的行数（*）
            paginationPreText: '上一页',//指定分页条中上一页按钮的图标或文字,这里是<
            paginationNextText: '下一页',//指定分页条中下一页按钮的图标或文字,这里是>
            striped: true,
            sortable: false,
            sortOrder: "asc",
            height: $(window).height() - 125,      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            showColumns: true,
            clickToSelect: true,
            detailView: false,
            fixedColumns: true,
            fixedNumber: 2, //固定列数
			// 请求前的回调 可携带额外参数
            queryParams: function (params) {
            	// 此处使用了LayUi组件 是为加载层
                loadIndex = layer.load(1);
                let resRepor = {
                    // ... 传递的额外参数 
                    type: reportTypeFlag,
                    // 服务端分页所需要的参数
                    limit: params.limit,
                    offset: params.offset
                }
                console.log(params, resRepor)
                return JSON.stringify(resRepor);
            },
            // 请求完成回调 可处理请求到的数据
            responseHandler: res => {
            	// 关闭加载层
                layer.close(loadIndex);
                return {                            //return bootstrap-table能处理的数据格式
                    "total":res.total,
                    "rows": res.rows.rows
                }
            },
            columns: getColumnsArray(reportTypeFlag) // 获取表头 此处会在请求数据前执行 正因如此 表头的封装不能放在 responseHandler中
        }
        $('#table').bootstrapTable('destroy').bootstrapTable(option);
    }