【Bootstrap table 根据开始时间和结束时间动态生成表格，附后台JSON格式数据】

1. 先来看效果图
2. 动态生成表格原理：其实就是将bootstrap table 的columns动态生成

    3.步骤

• ajax请求后台数据
• 前端获取开始时间和结束时间的每一天的日期，添加到数组中
• ajax请求成功，将前端获取的日期数组遍历，并动态构建columns

4.附上代码

//初始化table表格
function getColumns() {

       $.ajax({
           url : 'xxx/xxxxx.do',
           type : 'post',
           dataType : "json",
           data : {
               beginDate: $("#beginDate").val(),
               endDate: $("#endDate").val(),
           },
           async : false,
           success : function(returnValue) {
               var data = returnValue.rows;
               var dateStrArr=getDateStrArr();
               var mycolumn=[];

               mycolumn=[
                   {field: 'plateNumber', title: $.i18n.prop('PlateNumber'), align: 'center'},
               ]

               for(var s in dateStrArr) {
                   var str = dateStrArr[s];
                   mycolumn.push({
                       field: str,
                       title: str,
                       align: 'center',
                       valign: 'middle',
                       formatter: function (value,row,index) {
                           if(value!=0){
                               return "<a href='javascript:;' onclick='showDayMileage(\"" + row.boxId + "\",\"" + this.field + "\",\""+row.plateNumber+"\",\""+value+"\");' title='总公里' style='font-size: 15px;color:#FA7310'>" + value +"km"+ "</a>";
                           }else{
                               return 0+"km";
                           }
                       }
                   })
               }
               $('#recordList').bootstrapTable({
                   data:data,
                   cache:false,
                   pagination: true,
                   sidePagination : 'client',//前端分页
                   pageNumber : 1,
                   pageSize : 10,
                   pageList : [ 5, 10, 20, 30 ,50],
                   dataField: 'rows',
                   toolbar: '#toolbar',
                   striped: true,
                   clickToSelect: true,
                   showColumns: true,
                   showRefresh: true,
                   showToggle: true,
                   columns: mycolumn
               });
           }
       });
       }




//获取开始时间和结束时间中间的天数
 function getDateStrArr() {
            var dateStrArr=[];
            var beginDate = $("#beginDate").val();
            var endDate = $("#endDate").val();
            var date_count = GetNumberOfDays(beginDate, endDate);
            for (var i = 0; i <= date_count; i++) {
                var date_add = new Date(beginDate).setDate(new Date(beginDate).getDate() + i);
                var date =formatDateFromStr(date_add);
                dateStrArr.push(date);
            }
            ;
            return dateStrArr;
        };


         //获得天数
        function GetNumberOfDays(date1, date2) {
            var a1 = Date.parse(new Date(date1));
            var a2 = Date.parse(new Date(date2));
            //核心：时间戳相减，然后除以天数
            var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));
            return day
        };



//日期格式转换年月日
function formatDateFromStr(str) {
    return (new Date(str)).format("yyyy-MM-dd");
}

 

5.后台返回json数据格式