Bootstrap Table使用

今天无意间结识了Bootstrap Table，试用了一下！效果非常棒！

直接牛刀小试

1.首先从http://www.html580.com/?Ou4SZy5J下载需要的文件

2.接着创建一个html文件

3.引入css支持

<link rel="stylesheet" href="bootstrap.min.css">

<link rel="stylesheet" href="bootstrap-table.css">

4.引入js支持

<script src="jquery.min.js"></script>

 <script src="bootstrap.min.js"></script>

 <script src="bootstrap-table.js"></script>

5.使用

<table id="table1" data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">

<thead>

<tr>

<th data-field="state" data-radio="true">Item ID</th>

<th data-field="id" data-align="right">Item ID</th>

<th data-field="name" data-align="center">Item Name</th>

<th data-field="price" data-align="left">Item Price</th>

<th data-field="price1" data-align="left">Item Price1</th>

</tr>

</thead>

</table>

6.数据准备

data.json

[

    {

        "id": 0,

        "name": "zs",

        "price": 12.5,

        "price1": 555

    },

    {

        "id": 0,

        "name": "zs",

        "price": 12.5,

        "price1": 555

    },

    {

        "id": 0,

        "name": "zs",

        "price": 12.5,

        "price1": 555

    }

]

7.加载数据可以通过属性也可以通过js

    7.1 通过属性加载数据

        只需要在table标签上添加

    data-url="data.json"

    7.2 通过js加载数据

    $("#table1").bootstrapTable({

              url:'data.json'     

     });

    在线api    http://www.html580.com/?Ou4SZy5J

    初次写文章，写的不好，还请各位多多包涵多多指正