支持三种方式bootstrap table绑定数据:1.html格式数据(即静态数据);2.javascript传递数据;3.数据属性变量动态获取。

静态表格:data-toggle="table"(推荐学习:Bootstrap视频教程)
<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>JavaScript方式
<table id="table"></table>
<!--定义一个表格,无需设置表头,统一在JS中初始化,灵活度较高(梁新建议)-->
<script>
$('#table').bootstrapTable({
url: 'data1.json',
pagination: true,
search: true
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
})
</script>数据属性变量动态获取
<table
data-toggle="table"
data-url="data1.json"
data-pagination="true"
data-search="true">
<thead>
<tr>
<th data-sortable="true" data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!
以上就是bootstrap table 怎么绑定数据的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号