bootstrap 同一个table组件根据所选表名动态显示数据库中相应表的数据（这些表的列数和列名都不一样）要怎么弄

Question

目前表里的数据是前端jsp页面写死的，后台的数据处理与封装已经完成（json），由于对前端bootstrap框架不是很熟悉，不知道怎么动态的去更新列名以及相应的数据，求大神帮忙出出主意指导指导，在线等，挺急的~谢谢了~

Answer 1

都已经发送ajax了，接收到的数据直接用bootstrap table来处理呀，为什么要自己手动拼接，那你用这个控件做什么

Answer 2

前端table页面代码如下：

<table class="table table-striped table-bordered table-hover table-full-width" id="sample_table">
                                    
                                    <thead id="thead">

                                    </thead>

                                    <tbody id="tbody">
    
                                    </tbody>

                                </table>

search按钮的点击事件如下：

$("#search").click(function(){
                var period=$("#period").val();
                var orgId=$("#org").val();
                var mainClassId=$("#hasDataTable").val();
                var staId=$("#posinfo").val();
                $.ajax({
                      type: 'GET',
                      url: 'search.htm' ,
                      data:{"orgId" :orgId,"period":period,"mainClassId":mainClassId,"staId":staId },  
                      dataType:'json',
                      success: function(data){
                         if(data.length>0){
                             
                          alert("查询成功，总共"+data.length+"条数据，正在加载数据......");
                          
                          switch(mainClassId){
                          case'fixedflow':
                              
                                  alert("当前表格为定电流数据表......");
                                  
                                 $("#thead").empty();
                                 $("#tbody").empty();
                                 $("#thead").append("<tr>"+
                                 +"<th>样品顺序号</th>"+
                                 +"<th>采样批号</th>"+
                                 +"<th>单位编号</th>"+
                                 +"<th>调查时间</th>"+
                                 +"<th>水深</th>"+
                                 +"<th>流速Top</th>"+
                                 +"<th>流向Top</th>"+
                                 +"<th>流速0.2H</th>"+
                                 +"<th>流向0.2H</th>"+
                                 +"<th>流速0.4H</th>"+
                                 +"<th>流向0.4H</th>"+
                                 +"<th>流速0.6H</th>"+
                                 +"<th>流向0.6H</th>"+
                                 +"<th>流速0.8H</th>"+
                                 +"<th>流向0.8H</th>"+
                                 +"<th>流速Bot</th>"+
                                 +"<th>流向Bot</th>"+
                                 +"<th>流速Avg</th>"+
                                 +"<th>流向Avg</th>"+
                                 +"</tr>");
                             $.each(data, function(i, obj) {
                                 var time=obj.year+"-"+obj.month+"-"+obj.day+" "+obj.hour+":"+obj.minute;
                                 
                                 alert("时间为"+time);
                                 
                                 $("#tbody").append("<tr>"+
                                         +"<td>"+obj.sampleId+"</td>"+
                                         +"<td>"+obj.lotId+"</td>"+
                                         +"<td>"+obj.orgId+"</td>"+
                                         +"<td>"+time+"</td>"+
                                         +"<td>"+obj.waterDepth+"</td>"+
                                         +"<td>"+obj.horVelocity_TOP+"</td>"+
                                         +"<td>"+obj.horFlowDir_TOP+"</td>"+
                                         +"<td>"+obj.horVelocity_02H+"</td>"+
                                         +"<td>"+obj.horFlowDir_02H+"</td>"+
                                         +"<td>"+obj.horVelocity_04H+"</td>"+
                                         +"<td>"+obj.horFlowDir_04H+"</td>"+
                                         +"<td>"+obj.horVelocity_06H+"</td>"+
                                         +"<td>"+obj.horFlowDir_06H+"</td>"+
                                         +"<td>"+obj.horVelocity_08H+"</td>"+
                                         +"<td>"+obj.horFlowDir_08H+"</td>"+
                                         +"<td>"+obj.horVelocity_BOT+"</td>"+
                                         +"<td>"+obj.horFlowDir_BOT+"</td>"+
                                         +"<td>"+obj.horVelocity_AVG+"</td>"+
                                         +"<td>"+obj.horFlowDir_AVG+"</td>"+
                                         +"</tr>");
                             });
                                 break;

                        }
                      }
                    }
                 });
            });

我用的动态拼接，那几个alert框都能显示出正确的数据，但是前端页面上并没有加载出数据，可是感觉这么拼接应该是没有问题的啊，不知道哪里出了问题，您能帮忙看看吗？谢谢！

Answer 3

不好意思打扰了 这个问题已经解决了 是我字符串拼接出了问题 多写了+号（真是粗心了） 谢谢您之前的建议

Answer 4

建议你使用bootstrap table  或者自己拼接