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 id="auto_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');
}
