bootstrap table 怎么绑定数据

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

bootstrap table 怎么绑定数据

支持三种方式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 怎么绑定数据的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:bootstrap-select下拉框如何清除选中的状态?
下一篇:手把手教你使用css制作一个简单的心跳效果(代码详解)

发表评论

关闭广告
关闭广告