Bootstrap Table后台管理

Bootstrap Table 是一款基于 Bootstrap 框架的 jQuery 表格组件，配置简洁即可实现单选、多选、列排序、数据分页等核心功能，同时支持行内编辑、Excel/CSV 导出及自定义过滤等扩展能力，显著提升表格交互体验与开发效率。

1、 首先采用Bootstrap的Tab组件实现多表格切换展示，具体切换菜单代码如下：

2、 为每个需切换的标签添加 `data-toggle=tab` 属性，并为其设置对应锚点，格式为 `href=padding`，同时添加 `rel=external nofollow`。该锚点将精准匹配并激活对应的面板内容。确保标签与目标内容区块的 ID 保持一致，从而实现平滑、准确的选项卡切换效果。此方式简洁高效，兼容主流浏览器，适用于常规导航式标签页交互场景。

3、 每个子内容区域需设置与对应导航锚点相匹配的ID（如padding）。外层容器统一添加tab-content类名，各子内容区域则添加tab-pane fade in active类名，其中带有active的即为默认展开项。每个子内容区域内部均包含一个table元素，当用户切换不同标签页时，该table将实时更新并展示对应的数据内容。表格数据不采用静态写入，而是通过动态生成方式加载，确保每次切换都能准确呈现当前标签所需的信息，提升页面响应效率与用户体验。

4、 以上即为表格初始化函数，通过传入索引值（index）实现不同标签页切换时加载对应数据源并刷新相应表格。每个标签页的菜单项均绑定 onclick 事件，调用 freashTable(index) 函数触发刷新。表格所需全部配置均已集成于上述代码中：columns 用于定义列结构，其中 field 指定数据源中对应字段的键名，title 设置列标题文本，formatter 则提供自定义单元格内容格式化能力。例如，针对时间类型字段，可编写专用格式化函数，将原始时间戳或日期字符串统一转换为YYYY-MM-DD HH:MM:SS等易读格式，确保数据显示规范、一致且符合业务需求。该机制兼顾灵活性与可维护性，便于后续扩展与调整。

5、 对应字段为action的行即为操作按钮，其格式化代码如下：

6、 Bootstrap 分页组件已内置完善配置，支持设置每页显示条数、分页按钮、总记录数及总页数等功能。但原生不支持直接跳转至指定页码，需开发者自行实现页面跳转逻辑。所幸 Bootstrap 提供了相关方法接口，便于我们扩展自定义跳转功能，并可通过样式调整精确定位分页栏位置。

7、 selectPage用于跳转至指定页码，也可自行封装实现该功能。