动态Bootstrap Table 表格

动态Bootstrap table ，表格头为动态获取

先在body标签中加入一个空 div

<div class="col-xs-12" >
</div>

JS中加入动态获取的表格头JSON格式数据，进行添加

function load() {
        var date = $("#date").val();
        var year = "2019";
        var month = "8";
        $("#singlelast").empty();
        $("#singlelast").append("<table tablesinglelast\'></table>")
        var appendPos = $("#tablesinglelast");

　　　　　　// 添加表格头前几列
        appendPos.append("<thead><tr><th data-field=\'OrderId\' rowspan=\'1\' OrderId\' data-valign=\'middle\' data-align=\'center\'>发运地</th>" +
            "<th data-field=\'PN\' data-valign=\'middle\' rowspan=\'1\' data-align=\'center\'>物料号</th>" +
            "<th data-field=\'Factory\' data-valign=\'middle\' rowspan=\'1\' data-align=\'center\'>物料说明</th>" +
            "<th data-field=\'CustomerItem\' data-valign=\'middle\' rowspan=\'1\' data-align=\'center\'>Customer Item</th></tr><tr></tr></thead > ");

      // 这里是表格头后几列
        for (var i = 0; i < count; i++) {
            var appendPos2 = $("#tablesinglelast").children().eq(0).children().eq(0).children().eq(3 + i);            
            appendPos2.after("<th data-valign=\'middle\' colspan=\'1\'  data-align=\'center\' data-field=\'" + Data[i].FirstDayOfWeek + "\'>" + Data[i].FirstDayOfWeek + "</th>");
        }

        readyTable();
        getAttendanceResult();
    }

function readyTable() {
        $(\'#tablesinglelast\').bootstrapTable({//bootstraptable 插件
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 30],
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: \'asc\',
            showExport: true,                     //是否显示导出
            exportDataType: \'all\',
            search: true,
            //detailView: true,//父子表
            //onExpandRow: function (index, row, $detail) {
            //    oInitInitSubTable(index, row, $detail);
            //}
        });
    }

function getAttendanceResult() {
        $.ajax({
            type: "GET",
            url: "/Manage/ShipPartsData", //ShipPartsData
            dataType: "json",
            success: function (msg) {
                
                var data = bbb(msg);
                //console.log(data)
                var testJson = eval("(" + data + ")"); // string格式转换成json对象  
                $(\'#tablesinglelast\').bootstrapTable(\'load\', testJson);
            },
            error: function () {
                alert("获取发运数据失败");
            }
        });
        
    }

// 转换成需要的string格式
function bbb(data) {
        var temp = "[";
        for (var j = 0; j < data.length; j++) {

            temp += "{\'OrderId\':" + "\'" + data[j].OrderId + "\'" + ",\'PN\':" + "\'" + data[j].PN + "\'" + ",\'Factory\':" + "\'" + data[j].Factory + "\'";
            for (var i = 0; i < data[j].WorkingItem.length; i++) {
                temp = temp + ",\'" + data[j].WorkingItem[i].FirstDayOfWeek + "\':" + "\'" + data[j].WorkingItem[i].Quantity + "\'";
            }
            if (j == data.length - 1) {
                temp += "}]";

            } else {
                temp += "},";
            }
            //alert(temp)

        }
       
        return temp;
    }