Bootstrap-table Combined Header

1.

2. HTML code

1 <table id= "table" ></table>

3. JavaScript code

1$ ("#table"). bootstraptable ({2DataType: "JSON",3Method: ' Get ',4ContentType: "Application/x-www-form-urlencoded",5Cachefalse,6URL: ".. /data/mergedata.json ",7 columns:[8 9                 [Ten                     { One"title": "Washing Machine Statistics", A"HAlign": "Center", -"Align": "Center", -"Colspan": 5 the                     } -                 ], -                 [ -                     { +Field: ' Name ', -Title: "Functional Grouping", +valign: "Middle", AAlign: "center", atColspan:1, -Rowspan:2 -                     }, -                     { -Title: "Beautiful", -valign: "Middle", inAlign: "center", -Colspan:2, toRowspan:1 +                     }, -                     { theTitle: "Panasonic", *valign: "Middle", $Align: "center",Panax NotoginsengColspan:2, -Rowspan:1 the                     } +                 ], A                 [ the                     { +Field: ' Mideanum ', -Title: ' Quantity ', $valign: "Middle", $Align: "center" -                     }, -                     { theField: ' Mideapercent ', -Title: ' Proportion ',Wuyivalign: "Middle", theAlign: "center" -                     }, Wu                     { -Field: ' Panasonicnum ', AboutTitle: ' Quantity ', $valign: "Middle", -Align: "center" -                     }, -                     { AField: ' Panasonicpercent ', +Title: ' Proportion ', thevalign: "Middle", -Align: "center" $                     } the                 ] the             ] the})

Three arrays are stored in the columns:

The first set of arrays holds the header information for the table, where the colspan is the number of columns in the entire table

The second group holds the second row of headings in the table, where field is named as the corresponding cross-row field, which corresponds to name in Mergedata.json, colspan and rowspan are the number of columns and rows in the field, and the other fields are similar

The third group holds the third row header in the table, which corresponds to the data in the Mergedata.json

4, Mergedata.json

1 [2     {"Name": "Drum", "mideanum": "Ten", "Mideapercent": "29%", "Panasonicnum": "Ten", "Panasonicpercent": "29%"}, 3     {"Name": "Wave Wheel", "Mideanum": "9", "Mideapercent": "28%", "Panasonicnum": "Ten", "Panasonicpercent": "29%"} 4 ]

Bootstrap-table Combined Header