bootstrapTable入门demo
bootstrapTable是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
别的不多说,直接上代码,相信看完你对bootstrapTable的使用也有了进一步的认识,具体参数细节看官方文档。
bootstrapTable官方文档 http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap-table-demo</title>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 引入bootstrap-table样式 -->
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
</head>
<body>
<h4>第一种:通过设置远程的 url 如 data-url="data1.json" 来加载数据。</h4>
<table data-toggle="table" data-url="data1.json">
<thead>
<tr>
<th data-field="id">序号</th>
<th data-field="name">名称</th>
<th data-field="price">价格</th>
</tr>
</thead>
</table>
<h4>第一种:通过 JavaScript 的方式</h4>
<!--bootstrap-table表格-->
<table id="data-table"></table>
<!-- jquery -->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!-- bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<!-- bootstrap-table -->
<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
<!-- 引入中文语言包 -->
<script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script>
<script type="text/javascript">
var $table = $('#data-table');
//第一种:通过 JavaScript 的方式,方法一
/*$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'
}]
});*/
//第一种:通过 JavaScript 的方式,方法二
$table.bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
</script>
</body>
</html>
data1.json
[
{
"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 1",
"price": "$1"
},
{
"id": 5,
"name": "Item 1",
"price": "$1"
},
{
"id": 6,
"name": "Item 1",
"price": "$1"
},
{
"id": 7,
"name": "Item 1",
"price": "$1"
}
]
运行结果
这个demo很简单,很适合入门,想继续学习的,可看另一篇博客。
bootstrapTable分页 https://blog.csdn.net/csdnluolei/article/details/83510577