• 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

  • 相关阅读:
    weixueyuanNginx日志管理与监控8
    w3cschoolNetty 实战精髓篇2
    weixueyuanNginx集群9
    Java IO之 Netty与NIO服务器NIO中的零拷贝
    weixueyuanNginx在Kubernetes10
    CString内容转为16进制unsigned char
    为 Windows 驱动编译静态 lib 库
    makefile编译静态库或动态库,遍历所有源文件
    线程安全
    三十六、Promise
  • 原文地址:https://www.cnblogs.com/qiu18359243869/p/14465910.html
Copyright © 2020-2023  润新知