bootstrap-table（二）
使用
一、准备
1.样式：在html页面的head标签中引入Bootstrap库（假如你的项目还没使用）和bootstrap-table.css。
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>二、获取数据
Bootstrap Table通过data属性标签或者JavaScript来显示表格数据。
1、通过data属性标签。
在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。
<table data-toggle="table" data-url="data.json">
<thead>
...
</thead>
</table>2、通过JavaScript
<table id="table"></table> 一、简单的静态数据
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});2、通过url获取数据
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});三、demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-table.css">
</head>
<body>
<table id="table"></table>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-table.js"></script>
<!--自定义-->
<script>
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
</script>
</body>
</html>