最强表格渲染框架 - Bootstrap Table

1.需要准备的库

• Jquery3.1.1.min.js
• bootstrap.min.css
• bootstrap-table.css
• bootstrap.min.js
• bootstrap-table.js
• bootstrap-table-zh-CN.js
  

下载地址如下
Jquery.3.1.1
Bootstrap Tablev1.11.1
Bootstrap3.3.7

2.实现的效果

3.接口结构

{
"total":100,
"rows":[
    {"id":1,"name":"dongzhiping","price":"1234567"}
]
}

total是总页数，rows是数据。{}里面代表一行数据，对应数据库字段。

4.html结构

<table data-toggle="table" 
    data-url="data1.json"
    data-striped="true"
    data-pagination="true"
    data-side-pagination="server"
>
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

tr里面的data-field对应接口里的数据参数名。一一对应才能解析成功。

5.如何分页

当我们申明了数据来源于data1.json接口时，如果我们在table里设置了分页，并且是服务器分页。bootstrap-table会为我们生成如下参数用于访问data1.json,我们只要获取参数分页就行了。
http://localhost/data1.json?order=asc&offset=0&limit=10
我们利用order进行排序操作 offset做分页起点，limit查询条数。

5.Mysql如何实现页

select id,price,name from users where order by id {order} limit {offset},{limit}

你学会了吗？？？