Bootstrap-table动态表格

在开发中遇到一个需要动态生成table的需求，包括表头和数据。在调试的过程中遇到很多问题，包括数据分页，解决之后记录一下。

如下代码的数据加载流程：

①表头是动态的，在初始化table之前需要调一次后台拿到表头数据存储再全局变量table_columns中，调用initTable()初始化table。（此时table只加载出表头，没有数据。）

②table加载之后调用下面refreshTable()方法，请求后台拿到数据，此处因为我这里后台的数据不是bootstrap-table能处理的数据格式，使用了responseHandler对返回数据进行了格式化。

③之后如果需要显示其他数据，调用destroyTable()方法销毁table再重新初始化即可。

数据格式

我这里使用的是server分页，需要的数据格式是{“total”:“总条数”,“rec”:“[{},{}]”} 这种json格式的。total表示总记录条数（server分页必须有此键），rec是数组形式的（默认应该是叫做rows，此处我在初始化table时将dataField设置成了rec）。

表头也是json数组格式的：table_columns=[{"checkbox": "true"},{"field": "Create date","title": "Create date"},{"field": "Create time","title": "Create time"}];

//table标签

<table ></table>

//下面是动态table js代码
//设置全局变量queryFlag  用于判断是点击查询按钮 还是点击下方分页的页码 不设置此参数会导致如果点击了分页页码，再选择其他条件查询时，offset参数传递到后台不是0
var queryFlag=false;
// 动态table表头数组

    var table_columns=[];



//是初始化table的代码
    function initTable(){

        $('#auto_table').bootstrapTable({
            //url: '',                      //请求后台的URL（*）因为是动态表头，table加载时不请求后台，只初始化表头
            contentType: "application/json",                    //期望后台返回数据类型
            //data:table_data,                    //直接加载静态数据  此处不使用
            method: 'POST',                      //请求方式（*）
            dataField: "rec",                //数据节点   默认为rows 改成rec后需要后台返回的数组为rec
            toolbar: '#toolbar',               //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*） 两种分页方式所需的数据结构不同
            limit: 10,                      //每页的记录行数（*）
            offset: 1,                     // 初始化加载第一页，默认第一页,并记录 
            totalrows:0,                    //记录总条数
            pageList: [10, 25, 50],        //可供选择的每页的行数（*）
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            singleSelect: true,                 //单选框 true表示单选
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            //uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            queryParams : function (params) {
                //传到后台的参数  这里的键的名字和后台控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {


//分页参数 这三个参数传到后台即可进行分页
                    limit: params.limit,
                    offset: params.offset,
                    totalrows: params.totalRows,


//下面是个性化请求参数 根据你的业务传值
                    key_word1: $("#qry_keyword1").val(),
                    key_word1_name: $("#qry_keyword1_name").val(),
                    bus_cd:$("#qry_bus_cd").val()
                };


if(queryFlag){


temp.offset=0;


}
                return JSON.stringify(temp);
            }, 
            columns:table_columns,  //动态表头  数据从后台获取
            onLoadSuccess: function () {
                console.log("load success");
            },
    
        });

    }

//刷新table   
 function refreshTable(){
queryFlag=true;
        $('#auto_table').bootstrapTable('refreshOptions',
            { 'url': "url：此处为后台url",
                responseHandler: function(data){
                    var recData=new Array();
                    var data_rec=data.rec;
                    for(let i=0;i<data.rec_num;i++){
                        recData[i]=JSON.parse(data_rec[i].data);
                        recData[i].compare_data=data_rec[i].data;
                        recData[i].old_data=data_rec[i].old_data;
                    }
                    return {
                        "total":data.total,
                        "rec":recData
                    };
                },
            });
queryFlag=false;
    }

    /**
     * 销毁table
     */
    function destroyTable(){
        $('#auto_table').bootstrapTable('destroy');
    }