• 技术文章 >web前端 >Bootstrap教程

    bootstrap table 怎么绑定数据

    (*-*)浩(*-*)浩2019-07-11 09:27:11原创1822
    支持三种方式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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap
    上一篇:bootstrap怎么学 下一篇:bootstrap响应式布局图片怎么居中
    大前端线上培训班

    相关文章推荐

    • Bootstrap基本布局的实现过程(代码示例)• Bootstrap框架下下拉菜单的实现(代码示例)• Bootstrap框架的详细讲解(代码示例)• 图文详解bootstrap框架中table的使用方法和相关样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网