本篇文章给大家分享一下基于Bootstrap和jQuery的表格插件Bootstrap-Table的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
一、介绍
从项目名称就可以知道，这是一款 bootstrap 的表格插件。表格的展示的形式所有的前端几乎在工作中都有涉及过，bootstrap table 提供了快速的建表、查询、分页、排序等一系列功能。【相关推荐：《bootstrap教程》】
项目地址：https://github.com/wenzhixin/bootstrap-table
可能 Bootstrap 和 jQuery 技术有些过时了，但如果因为历史的技术选型或者旧的项目还在用这两个库的话，那这个项目一定会让你的嘴角慢慢上扬，拿下表格展示方面的需求易如反掌！
二、模式
Boostatrp Table 分为两种模式：客户端（client）模式、服务端（server）模式。
客户端：通过数据接口将服务器需要加载的数据一次性展现出来，然后装换成 json 然后生成 table。我们可以自己定义显示行数，分页等，此时就不再会向服务器发送请求了。
服务器：根据设定的每页记录数和当前显示页，发送数据到服务器进行查询。
三、实战操作
Tips： 解释说明均在代码中以注释方式展示，请大家注意阅读。
我们采用的是最简单的 CDN 引入方式，代码可直接运行。复制代码并将配置好 json 文件的路径即可看到效果。
3.1 快速上手
注释中的星号表示该参数必写，话不多说上代码。示例代码：
Hello, Bootstrap Table!
// 引入 css
// 需要填充的表格
上面的代码展示通过基本 API 实现基础的功能，示例代码并没有罗列所有的 API。该库还有很多好玩的功能等着大家去发现，正所谓师父领进门修行靠个人～
主要特性： 1、支持多种语言 BEES支持多种语言，后台添加自动生成，可为每种语言分配网站风格。 2、功能强大灵活 BEES除内置的文章、产品等模型外，还可以自定义生成其它模型，满足不同的需求 3、自定义表单系统 BEES可自定义表单系统，后台按需要生成，将生成的标签加到模板中便可使用。 4、模板制作方便 采用MVC设计模式实现了程序与模板完全分离，分别适合美工和程序员使用。 5、用户体验好 前台
3.2 拆解讲解
下面对关键点进行阐述，为了更方便使用的小伙伴清楚插件的用法。
3.2.1 初始化部分
选择需要初始化表格。
$('#tb_departments').bootstrapTable({})
这个就像table的入口一样。
3.2.2 阅读数据部分
columns:[{field: 'Key', title: '文件路径',formatter: function(value,row,index){} }]- field json 中键值对中的 Key
- title 是表格头显示的内容
- formatter 是一个函数类型，当我们对数据内容需要修改时会用它。例：编码转换
3.2.3 事件触发器
events:operateEvents
window.operateEvents = {
'click .download': function (e,value,row,index) {
console.log(row);
}
}因为很多时候我们需要针对表格进行处理，所以事件触发器是一个不错的选择。比如：它可以记录我们的行数据，可以利用触发器进行定制函数的执行等。
四、扩展
介绍几个扩展可以让我们便捷的实现更多的表格功能，而不需要自己造轮子让我们的工作更加高效（也可以进入官网查看扩展的具体使用方法，官方已经收集了大量的扩展）。老规矩直接上代码：
4.1 表格导出
showExport: true, //是否显示导出 exportDataType: basic, //导出数据类型，支持：'基本'，'全部'，'选中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //导出类型
4.2 自动刷新
autoRefresh: true, //设置 true 为启用自动刷新插件。这并不意味着启用自动刷新 autoRefreshStatus: true, //设置 true 为启用自动刷新。这是表加载时状态自动刷新 autoRefreshInterval: 60, //每次发生自动刷新的时间（以秒为单位） autoRefreshSilent: true //设置为静默自动刷新
4.3 复制行
showCopyRows: true, //设置 true 为显示复制按钮。此按钮将所选行的内容复制到剪贴板 copyWithHidden: true, //设置 true 为使用隐藏列进行复制 copyDelimiter: ', ', //复制时，此分隔符将插入列值之间 copyNewline: '\n' //复制时，此换行符将插入行值之间
五、总结
本篇文章只是简单的阐述 Bootstrap-Table 如何使用，正在对表格功能实现而忧愁的小伙伴，可以使用 HelloGitHub 推荐的这款插件。你会发现网页制作表格还可以如此快捷，期待小伙伴挖掘出更加有意思的功能哦。
注：上面 js 部分并没有采用函数形式，建议在使用熟悉之后还是采用函数形式，这样也方便复用及让代码看起来更加规范。
更多编程相关知识，请访问：编程入门！！
