bootstrapTable——一个好用的表格插件
自从使用bootstrap框架后，页面搭建简直又快又好。往后需要搜索什么插件的时候，都会在搜索框里多输入一个bootstrap，看有没有基于bootstrap写成的相关框架。这不，一个超级好用的表格插件就被我搜索到了。开心❤。
下面就给小伙伴们分享一下使用过程（主要是码下来方便自己以后查找【(ノへ￣、)捂脸】）。
1.简介
顾名思义，bootstrapTable是一个基于bootstrap的表格框架，支持单选按钮、复选框、排序、分页及其他附加功能。支持多语言。
2.下载
源码地址：
https://github.com/wenzhixin/bootstrap-table/archive/master.zip
也可以通过bower：
$ bower install bootstrap-table
也可以通过npm
$ npm install bootstrap-table
同时你也可以下载对应的中文提示包。bootstrap-table-zh-CN.min.js
3.使用
引入 Bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.css 到 head 标签下。
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css">
引入 jQuery 库，bootstrap 库（假如你的项目还没有使用）和 bootstrap-table.js 到 head 标签下或者在 body 标签关闭之前（一般建议这么做）。
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="bootstrap-table-zh-CN.js"></script>
使用data属性的方式
无需编写 JavaScript 启用 bootstrap table，我们对普通的 table 设置 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>
我们也可以通过设置远程的 url 如 data-url="data1.json" 来加载数据。
<table data-toggle="table" data-url="data1.json">
<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>
