码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap绑定数据

时间:2021-03-02 12:21:56      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:动态   tps   声明   head   $2   arc   设置   新建   tst   

支持三种方式初始化表格:

1.html格式数据(即静态数据);

2.JavaScript传递数据;

3.数据属性变量动态获取。

1.静态表格:data-toggle="table"

<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>
静态表格(JSON格式数据):data-toggle="table"
  data-url="data1.json"

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
————————————————
版权声明:本文为CSDN博主「良心有约」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u010164507/article/details/88800564

bootstrap绑定数据

标签:动态   tps   声明   head   $2   arc   设置   新建   tst   

原文地址:https://www.cnblogs.com/qiu18359243869/p/14465910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!