bootstraptable怎么绑定数据

来源：动视网责编：小采时间：2020-11-27 15:02:07

bootstraptable怎么绑定数据

bootstraptable怎么绑定数据:支持三种方式bootstrap table绑定数据：1.html格式数据（即静态数据）；2.JavaScript传递数据；3.数据属性变量动态获取。静态表格：data-toggle="table"（推荐学习：Bootstrap视频教程）<table data-toggle="

推荐度：

点击下载本文 文档为doc格式

导读bootstraptable怎么绑定数据:支持三种方式bootstrap table绑定数据：1.html格式数据（即静态数据）；2.JavaScript传递数据；3.数据属性变量动态获取。静态表格：data-toggle="table"（推荐学习：Bootstrap视频教程）<table data-toggle="

支持三种方式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教程栏目进行学习！

bootstraptable怎么绑定数据

推荐度：

点击下载本文 文档为doc格式

标签：绑定怎么绑定数据

热门焦点

bootstraptable怎么绑定数据

bootstraptable怎么绑定数据

bootstraptable怎么绑定数据

最新推荐

猜你喜欢

热门推荐