基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置，就可以拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能，更好的提高开发效率和减少开发时间。 [img]http://files.jb51.net/file_images/article/201605/201653094912743.jpg?201643094925[/img] [b]1、插件描述：[/b]Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等，插件[url=http://xiazai.jb51.net/201605/yuanma/Bootstrap%20Table(jb51.net).rar]下载[/url]。 [b]2、特点：[/b] 基于Bootstrap 3开发（同时支持 Bootstrap 2） 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JSON数据 点击表头可简单的进行排序 支持自定义列显示 支持单/复选 强大的分页功能 支持名片布局 支持多语言 [b]3、使用方法：[/b] 1）、在html页面的head标签中引入Bootstrap库（假如你的项目还没使用）和bootstrap-table.css。 2）、在head标签或者在body标签闭合前（比较推荐）引入jQuery库和Bootstrap库（假如你的项目还没使用）和bootstrap-table.js。 3）、指定数据源，这里有两种方式 [b]方式1：[/b]通过data属性标签 在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。 [b]方式2：[/b]通过JavaScript设置数据源 通过JavaScript来启用带有id属性的Table。 [b]4、Bug描述：[/b] [b][img]http://files.jb51.net/file_images/article/201605/201653095445817.jpg?20164309551[/img] [/b] 用标签属性方式设置字段formatter时，发现没有效果，[b]图片不清楚，大家可以直接下载实例进行研究，[/b][url=http://xiazai.jb51.net/201605/yuanma/Bootstrap%20Table-bug(jb51.net).rar]下载地址[/url]。 如：<th data-field="sex" data-formatter="format_sex">性别</th> [b]1)、原因： [/b]bootstrap-table.js第399行，代码中只判断了formatter typeof 为function的情况 [b]2)、解决办法： [/b]修改第399行代码块： 修改前 修改后： 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是为大家分享的Bootstrap Table使用方法，希望对大家熟练掌握Bootstrap Table使用方法有所帮助。