Bootstrap本身不提供后台管理页完整解决方案，仅提供CSS/JS组件库；实现学生花名册管理需用对组件并补足搜索、分页、编辑弹窗等逻辑，如用bootstrap-table配合服务端分页、Modal动态加载数据、SheetJS导出及状态同步机制。
Bootstrap 本身不提供后台管理页的完整解决方案，它只是一套 CSS/JS 组件库；直接用 bootstrap 做学生花名册管理页，核心是「用对组件 + 补足缺失能力」——比如搜索、分页、编辑弹窗这些得自己写逻辑，不能指望 bootstrap-table 或 bootstrap-4 自带 CRUD。
用 bootstrap-table 渲染带搜索和分页的花名册表格
bootstrap-table 是最贴近需求的扩展，比手写 table + pagination 组合省事得多，但要注意它默认不支持服务端分页的字段映射，容易查不到数据。
- 必须设置
data-url指向返回 JSON 的接口，且后端响应格式要符合bootstrap-table要求（外层有total和rows字段） - 启用搜索需加
data-search="true"，但它只对当前页数据过滤，如要全局搜索，得配合data-side-pagination="server" - 列定义里用
data-field="name"对应 JSON 字段名，别写成中文或驼峰不一致（比如后端传student_name，但写了data-field="name"就会空着） - 别漏掉
data-show-refresh="true"和data-show-columns="true"，不然管理员没法手动刷新或隐藏“身份证号”这类敏感列
在 Bootstrap Modal 里做学生信息编辑，避免页面跳转
用 modal 弹窗改学生信息很常见，但新手常卡在「点保存没反应」或「关掉再打开还是旧数据」——根本原因是没清空表单或没绑定正确事件。
- 编辑前用
$('#editModal').on('show.bs.modal', function (e) {...})拿到触发按钮的data-id，再用 AJAX 获取该学生数据并填入表单 - 保存按钮必须用
type="button"，不是submit，否则会触发表单默认提交导致页面刷新 - 保存成功后调用
$table.bootstrapTable('refresh')刷新表格，而不是手动修改某行 DOM —— 否则排序、搜索状态会错乱 - 关闭弹窗前执行
$('#editForm')[0].reset()，否则下次打开会残留上次编辑内容
导出 Excel 时避开 table2excel 的兼容性坑
很多教程推荐 table2excel，但它不支持 Bootstrap 5、不处理 colspan、导出中文会乱码——实际更稳的是用 SheetJS（xlsx 库）手动生成。
- 别直接传
$('table')给导出函数，先用$table.bootstrapTable('getData')拿 JS 数组，确保是最新数据（含搜索/筛选后的结果） - 中文字段名写进
sheet前，用String.fromCharCode(...)或new Blob([s], {type: 'text/csv;charset=utf-8;'})显式声明 UTF-8，否则 Excel 打开是乱码 - 如果花名册含“班级”“院系”等下拉选项，导出时别导
select元素，而要导option:selected的text值
真正难的不是画出表格或弹窗，而是让搜索、编辑、导出三者状态同步：比如在第 5 页搜“张”，编辑完一个学生后，表格得回到第 5 页并保持关键词，这个得靠 bootstrap-table 的 queryParams 和 onSearch 事件自己串起来——文档里不写，但线上环境一动就露馅。
