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

    初次寫文章，寫的很差，還請各位多多包涵多多指正