在开发中遇到一个需要动态生成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 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');  
}