首先引入庫
<!-- Bootstrap core CSS -->.
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
順序不能搞錯,官網的例子引入不全,總是問題,自己記錄下
body標籤裏寫
<!-- 表格顯示-->
<table id="table">
<thead>
<tr>
<th data-field="id">id</th>
<th data-field="name">名字</th>
<th data-field="price">價格</th>
</tr>
</thead>
</table>
<Script>
//我這裏的data是list形式,list裏面是字典var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
{
'id': 1,
'name': 'Item 1',
'price': '$1'
},
{
'id': 2,
'name': 'Item 2',
'price': '$2'
},
{
'id': 3,
'name': 'Item 3',
'price': '$3'
},
{
'id': 4,
'name': 'Item 4',
'price': '$4'
},
{
'id': 5,
'name': 'Item 5',
'price': '$5'
}
]
var $table = $('#table');
$table.bootstrapTable({data: data});
</Script>
此外bootstrapTable的數據源還可以制定爲其他形式,如URL,json等等
詳見table例子官網