Bootstrap Table创建后台管理系统 _小知识

Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等的功能。
工具/原料JavaScript
方法/步骤1首先是用到了bootstrap的Tab来切换不同的表格用于展示，切换菜单代码如下：

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

6同时分页bootstrap已经提供了完整的配置（包括每页显示的行数，分页按钮，总条数和总页数等等）但是没有跳转到指定行，所以需要我们自己写他的样式定位到相应的分页栏，不过他有相关的方法提供，
【Bootstrap Table创建后台管理系统】selectPage就是跳到指定页，我们可以自己系一个方法：