bootstrap根据数据库自动生成多列

该博客介绍了一个JavaScript函数loadTable(),它根据从数据库获取的数据动态生成Bootstrap表格。首先,定义了列结构,包括姓名、手机号、金额、付款状态和备注等字段。接着,通过Ajax异步请求获取数据,并将返回的数据显示到表格中。此外,还展示了如何根据自定义数据映射生成额外的列,如单选和多选问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

function loadTable(){
            var param=getParamFromUrl();
            var colums=[];
            var data=[];
            
            colums.push({
                field: 'name',title: '姓名', sortable: true ,width: 150
            },{
                field: 'phone',title: '手机号', sortable: true ,width: 150
            },{
                field: 'money',title: '金额', sortable: true ,width: 150
            },{
                field: 'payStatus1',title: '付款状态', sortable: true ,width: 150
            },{
                field: 'remark',title: '备注', sortable: true ,width: 150
            });
            
            
            $.ajax({
                url: "url",
                type: "post",
                async: false,
                data: data,
                dataType: "json",
                success: function (resultData) {
                   if(resultData){
                      $.each(resultData,function(index,value){
                          colums.push({field:value.name,title:value.name,sortable:true,width: 150});
                      });
                      colums.push({
                          field: 'SignleCustom',title: '单选问题', sortable: true ,width: 150
                      },{
                          field: 'MultiCustom',title: '多选问题', sortable: true ,width: 400
                      });
                   }
                
                },
               
            });
            $.ajax({
                url: "url",
                type: "get",
                async: false,
                data: {timestamp:$.now()},
                dataType: "json",
                success: function (resultData) {
                   if(resultData){
                      $.each(resultData,function(index,value){
                          var row = {};
                          row['name']=value.name;
                          row['phone']=value.phone;
                       
                          row['money']=value.money;
                          row['payStatus1']=value.payStatus=="PAYED"?'已付款':'未付款';
                          row['SignleCustom']=value.SignleCustom;
                          row['MultiCustom']=value.MultiCustom;
                          row['remark']=value.remark;
                          $.each(value.customMap,function(key,value){
                              row[key]=value;
                          })
                          data.push(row);
                      })
                   }
                
                },
               
            });
            initTable(colums,data);
        }
        
    function initTable(colums,data){
            
        $('#tableActivity').bootstrapTable('destroy').bootstrapTable({
            cache: false,
            height: 550,
            pagination: true,
            pageSize: 50,
            pageList: [10, 25, 50, 100],
            search: true,
            searchAlign:'left',
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            toolbarAlign: 'left',
            clickToSelect: true,
            idField:'Id',
            responseHandler:'dealData',
            columns:colums,
            data:data
        });
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值