Load data into extended Bootstrap table with colspan - twitter-bootstrap-3

Question

Excuse me, now I am using this to make a table. Now I would like one table header to have this property, colspan="6". However, how can I load data into this table?
Note. the table structure is:
<tr>
<th colspan="6" class="col-xs-4" data-field="status" data-sortable="true">Status</th>
</tr>
Note. the way I load data into bootstrap table is:
$("#table").bootstrapTable({data: data});

Answer 1

Bootstrap-table does not support rowspan and colspan Header temporarily.
More info : https://github.com/wenzhixin/bootstrap-table/issues/182
Alternatively, you can try below solution
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
},
{
field: 'price',
title: 'Item Price'
},
{
field: 'color',
title: 'Item Color'
},
{
field: 'size',
title: 'Item Size'
},
{
field: 'discount',
title: 'Item Discount'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1',
color: 'Red',
size: 'XL',
discount: '20%'
},{
id: 2,
name: 'Item 2',
price: '$2',
color: 'Green',
size: 'L',
discount: '30%'
},{
id: 'Total Items',
name: 2
}]
});
$('#table').bootstrapTable('mergeCells', {
index: 2,
field: 'name',
colspan: 5
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<table id="table"></table>