bootstrap table动态加载列表头及数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30641447/article/details/90205595

首先需要后端返回的数据格式为：（后端代码忽略，根据各自情况返回，数据结构跟下图差不多）

注意 表头数据：titles和表数据rows的格式

titles的field就是rows的key，有多少个titles，rows中的一个数据就有多少个对应的field与其对应

前端代码：

            function initTable(){
                        layer.msg('数据加载中，请稍等...', {
                            icon: 16
                            ,shade: [0.3, '#cdcdcd']
                            ,skin:'demo-class'
                            ,time:0
                            
                        });
                        $.post('/XXXe',{参数},function(json){
                            //这里调用初始化表头
                            composeCol(json.titles);
                            
                            $('#orderHeaderTable').bootstrapTable({
                                //url: 'showOrderList',
                                
                                toolbar:'#toolbar',
                                
                                striped: true,                      //是否显示行间隔色
                                    
//                              cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                                    
                                sortable: true,                     //是否启用排序
                                
                                sortOrder: "desc",                   //排序方式
                                
                                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                                
                                pageNumber: 1,                       //初始化加载第一页，默认第一页
                                
                                pageSize: 20,                       //每页的记录行数（*）
                                  
                                pageList: [20, 35, 50, 100],  
                                                
                                paginationPreText: "上一页",           
                                
                                paginationNextText:"下一页",
                                
                                pagination: true,                   //是否显示分页（*）
                                
                                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                                                    
                                showColumns: true,                  //是否显示所有的列
                                
                              
                                
                                minimumCountColumns: 2,             //最少允许的列数
                                
                                clickToSelect: true,                //是否启用点击选中行
                                
                                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                                showFooter : true, 
                                exportDataType: "all",   //导出类型   basic' 当前页 'all' 所有数据  'selected'.选中的数据
                                
                                undefinedText:"",
                                
                                multipleSearch:true,
                                
                                queryParams:function() {
                                    return {
                                    };
                                },

                                columns: clos
                                
                            });
                            
                            //初始化加载按钮
                            $('#orderHeaderTable').bootstrapTable("load" , json.rows);
                            
                            layer.closeAll();
                        });

                    
                    }

  var clos = [];
  var colIndex=0;
  var indexs=0;
  var boot=false; 
//表头初始化     
 function composeCol(titles){
            /* 	 clos.push({field:'state',checkbox:true,}); */
                 clos.push({field:'exnum',title:'表头1',footerFormatter:"统计",width:120,falign:"center",sortable:true});
                 clos.push({field:'exhibitor',title:'表头2',width:"10%",falign:"center",sortable:true});
            	if(titles.length>2){
                       for (var int = 0; int < titles.length; int++) {
                           clos.push({field:titles[int].field,title:titles[int].title,align:"center",visible:titles[int].visible,sortable:true});
                       }
                       return clos;
            	}else{
            		return clos;
            	}
         
            }

还有一步就是每次请求数据前都要将boostraptable销毁再初始化：

$("#orderHeaderTable").bootstrapTable('destroy');