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

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