基于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="/UploadFiles/2021-04-02/jquery.min.js">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>
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学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是为大家分享的Bootstrap Table使用方法，希望对大家熟练掌握Bootstrap Table使用方法有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。