值得分享的轻量级BootstrapTable表格插件
基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置，就可以拥有强⼤的⽀持固定表头、单/复选、排序、分页、搜索及⾃定义表头等功能，更好的提⾼开发效率和减少开发时间。
1、插件描述：Bootstrap Table显⽰数据表格格式，提供了丰富的⽀持，单选框、复选框、排序、分页等，插件。
2、特点：
基于Bootstrap 3开发（同时⽀持 Bootstrap 2）
响应式界⾯
固定表头
完全可配置
⽀持data属性
显⽰/隐藏列
显⽰/隐藏表头
使⽤AJAX获取JSON数据
点击表头可简单的进⾏排序
⽀持⾃定义列显⽰
⽀持单/复选
强⼤的分页功能
⽀持名⽚布局
⽀持多语⾔
3、使⽤⽅法：
1）、在html页⾯的head标签中引⼊Bootstrap库（假如你的项⽬还没使⽤）和bootstrap-table.css。
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
2）、在head标签或者在body标签闭合前（⽐较推荐）引⼊jQuery库和Bootstrap库（假如你的项⽬还没使⽤）和bootstrap-table.js。
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
3）、指定数据源，这⾥有两种⽅式
⽅式1：通过data属性标签
在⼀个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启⽤Bootstrap Table。
<table data-toggle="table" data-url="data.json">
<thead>
...
</thead>
</table>
⽅式2：通过JavaScript设置数据源
通过JavaScript来启⽤带有id属性的Table。
$('#table').bootstrapTable({
url: 'data.json'
});:
4、Bug描述：
⽤标签属性⽅式设置字段formatter时，发现没有效果，图⽚不清楚，⼤家可以直接下载实例进⾏研究，。如：<th data-field="sex" data-formatter="format_sex">性别</th>jquery插件分享
1)、原因：bootstrap-table.js第399⾏，代码中只判断了formatter typeof 为function的情况
2)、解决办法：修改第399⾏代码块：
修改前
if (typeof that.header.formatters[j] === 'function') {
value = that.header.formatters[j](value, item);
}
修改后：
if (typeof that.header.formatters[j] === 'function') {
value = that.header.formatters[j](value, item);
}else if(typeof that.header.formatters[j] === 'string') {
if(typeof window[that.header.formatters[j]] === 'function') {
value = window[that.header.formatters[j]](value, item);
}
}
如果⼤家还想深⼊学习，可以点击进⾏学习，再为⼤家附3个精彩的专题：
以上就是为⼤家分享的Bootstrap Table使⽤⽅法，希望对⼤家熟练掌握Bootstrap Table使⽤⽅法有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。