Dynamic Bootstrap Table Table

Dynamic Bootstrap table, head table for the dynamic acquisition

To join the body in an empty div tag

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

　　

JS was added dynamically acquired JSON format header data table, add

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

　　　　　　// 添加表格头前几列
        appendPos.append("<thead><tr><th data-field='OrderId' rowspan='1' id='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 >var) {
            ; I <COUNT; I ++0I =var(for
      // this is the first table columns);"

         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();
    }

readyTable function () { 
        $ ( ' #tablesinglelast ' ) (.bootstrapTable { // bootstraptable plug 
            the pageNumber: . 1 ,                        // initialize loading the first page, the first page by default 
            the pageSize: 10 ,                        // number of rows per page (* ) 
            pageList: [ 10 , 20 , 30 ], 
            pagination: to true ,                    // whether to show pagination (*) 
            sortable: to true ,                      // whether to enable sorting
            the sortOrder: ' ASC ' , 
            showExport: to true ,                      // whether derived 
            exportDataType: ' All ' , 
            Search: to true ,
             // DetailView: to true, // Sons Table
             // 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 ( " Get shipping data failed " ); 
            } 
        }); 
        
    }

 

// 转换成需要的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;
    }