Load data into extended Bootstrap table with colspan -
excuse me, using this make table. 1 table header have property, colspan="6"
. however, how can load data table?
note. table structure is:
<tr> <th colspan="6" class="col-xs-4" data-field="status" data-sortable="true">status</th> </tr>
note. way load data bootstrap table is:
$("#table").bootstraptable({data: data});
bootstrap-table not support rowspan
, colspan
header temporarily.
more info : https://github.com/wenzhixin/bootstrap-table/issues/182
alternatively, 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>
Comments
Post a Comment