Bootstrap-table学习笔记
2024-10-12 05:44:02
| 引入CSS文件
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
| 引入相关库
我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>
| 启用Bootstrap Table插件：
官方文档中给出了我们有两种那个方式来启用bootstrap-table插件：
1，通过data属性的方式：
<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
2，通过js的方式：
//只需要HTML中写下table标签，并设置id
<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'
}]
});
也可以通过url获取数据
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id', //与返回值的JSON数据的key值对应
title: 'Item ID' //列名
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
最新文章
- nodejs学习之events
- Broadmann分区
- Android 布局优化
- HtDP读后感
- visual studio 2013 秘钥
- Qt——鼠标拖动调整窗口大小
- 翻译：为 URL Rewrite 模块创建重写规则
- SSIS ->> Data Flow Design And Tuning
- JS中的className含义
- Uva 10881 Piotr’s Ants 蚂蚁
- leetcode 31. Next Permutation(字典序的下一个)
- c语言中scanf（）、printf（）函数
- hrbustoj 1494（原题UVA 315 Network） 解题报告 tarjan求割点
- XMPP 测试工具
- R语言学习——图形初阶之折线图与图形参数控制
- 微信小程序-表单笔记2
- HDU 1079 Calendar Game （博弈）
- spring创建bean模式singleton与prototype的区别
- Kettle系列: Kettle并行执行Trans后的合并问题
- 河工大第十届ACM省赛随笔