码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-09-24 22:16:19      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:i++   lis   list   20px   middle   trap   ima   com   console   

 

使用的插件: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: ‘社会组织名称‘,
                  width:40,
                  halign:‘center‘,
                  align: ‘center‘,
                  valign: ‘middle‘,
              },
              {
                  field: ‘time‘,
                  title: ‘登记时间‘,
                  width:40,
                  align: ‘center‘,
                  valign: ‘middle‘,
              },
              {
                  field: ‘jiguan‘,
                  title: ‘登记机关‘,
                  width: 40,
                  align: ‘center‘,
                  valign: ‘middle‘,
              },
              
              
          ]
      });

 

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

标签:i++   lis   list   20px   middle   trap   ima   com   console   

原文地址:https://www.cnblogs.com/lifan12589/p/13725589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!