前台接收后端的JsonArray，循环输入页面表格

使用的插件：bootstrap

效果：

HTML:

    <div class="common-content" style="margin-top:20px;">
            <h3 class="PrimaryTitle">列表查询</h3>
                    
            <table id="workApplyData" class="table" data-pagination="true" data-side-pagination="client"></table>                        
    </div>

CSS:

table{
    font-size:15px;
    table-layout:fixed;
}
.bootstrap-table{
    margin:20px 0 50px;
}
.table th{
    background:#ffefee;
    text-align:center;
}
.table th{
    font-weight:normal;
}
table.table tbody tr td{
    vertical-align: middle;
}

后台json返回：

[{"orgClDate":"2019-07-01","orgName":"上海市XX服务中心1","xzqhCodeName":"上海市XX局1"},
{"orgClDate":"2019-07-02","orgName":"上海市XX服务中心2","xzqhCodeName":"上海市XX局2"},
{"orgClDate":"2019-07-03","orgName":"上海市XX服务中心3","xzqhCodeName":"上海市XX局3"},
{"orgClDate":"2019-07-04","orgName":"上海市XX服务中心4","xzqhCodeName":"上海市XX局4"},
{"orgClDate":"2019-07-05","orgName":"上海市XX服务中心5","xzqhCodeName":"上海市XX局5"}]

JS:

    var workApplyData=[] ;
    var datas = Data();
    function Data(){ 
         $.ajax({
                  type:"post",
                  url: "http://localhost:8080/list.do",
                  data : "",
                    async: false, 
                    dataType : "json",
                    error : function() {
                    },
                    success : function(datafh) {
                        var array = datafh.data;
                    //遍历取出
                    for(var i = 0;i<array.length;i++){
                        var names=array[i].orgName;
                        var times=array[i].orgClDate;
                        var jiguans=array[i].xzqhCodeName;
                         //往数组里赋值
                         workApplyData.push({name:names,time:times,jiguan:jiguans});
                         console.log(workApplyData);
                    } 
                 }     
             });
    }
    
    
    
    
    
    
     
      $('#workApplyData').bootstrapTable({
         
          data: workApplyData,
          queryParams: "queryParams",
          sidePagination: "true",
          uniqueId: "ID",
          pageSize: "10",//每页数据条数
          search: true,//开启搜索框
          pageList: [10,20,30,40,50],//页面数据个数选择
          smartDisplay:false,
          sortable: true, // 是否启用排序
          formatNoMatches:function(){
              return "暂无数据";
          },
          //对应的参数：
          columns: [
              {
                  field: 'name',
                  title: '社会组织名称',
                  40,
                  halign:'center',
                  align: 'center',
                  valign: 'middle',
              },
              {
                  field: 'time',
                  title: '登记时间',
                  40,
                  align: 'center',
                  valign: 'middle',
              },
              {
                  field: 'jiguan',
                  title: '登记机关',
                   40,
                  align: 'center',
                  valign: 'middle',
              },
              
              
          ]
      });