Bootstrap Table创建后台管理系统

Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等的功能。

工具/原料

• JavaScript

方法/步骤

1. 1

   首先是用到了bootstrap的Tab来切换不同的表格用于展示，切换菜单代码如下：

   
2. 2

   给每一个需要切换的标签 加上｛data-toggle="tab"｝，并且增加锚点用于匹配到对应的切换的子内容｛锚点：href="#padding" rel="external nofollow" ｝，切换对应的字内容代码如下：

   
3. 3

   每一个需要切换子内容元素设置对应上述锚点的id｛#padding｝,给外层容器加（tab-content），给子元素容器加class(tab-pane fade in active),有active的就是默认选中的。每一个子内容都有一个table元素，需要的table切换每一个tab就会刷新显示对应的table数据。采用动态的生成table的方式加载数据。

   
4. 4

   以上就是初始化table的函数，传index是为了切换时候请求不同的地址刷新不同的table，在每一个tab切换菜单都有onclick事件函数 freashTable（index）,table的所有用到的配置都在上述代码中做了注释，columns配置每一行，field是对应的每一列要显示的字段key值，title对应的是每一列的头部，formatter是格式化每一列的自定义函数,下面只展示时间格式化函数代码：

   
5. 5

   对应的field为action的那一行就是操作按钮了，格式化操作按钮代码如下：

   
6. 6

   同时分页bootstrap已经提供了完整的配置（包括每页显示的行数，分页按钮，总条数和总页数等等）但是没有跳转到指定行，所以需要我们自己写他的样式定位到相应的分页栏，不过他有相关的方法提供，

   selectPage就是跳到指定页，我们可以自己系一个方法：