• bootstrap绑定数据


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

    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

  • 相关阅读:
    CSS3 字体
    capitalized-comments (Rules) – Eslint 中文开发手册
    heapq (Data Types) – Python 中文开发手册
    Java中的Java.lang.Math类| 1
    shell脚本的条件测试与比较
    centos7关闭防火墙
    vmwaretool安装
    mongodb
    php中0与空 Null false的区别
    git使用总结
  • 原文地址:https://www.cnblogs.com/qiu18359243869/p/14465910.html
Copyright © 2020-2023  润新知