应使用 bootstrap-table 插件，因其原生支持列显隐（通过 data-show-columns="true" 和 showColumns 扩展），兼容 Bootstrap 5，具备状态记忆、导出过滤等完整功能，且避免样式冲突与响应式破坏。
表格列显隐控制该用哪个 Bootstrap 插件
Bootstrap 原生不提供列显隐（column toggle）功能，bootstrap-table 是最常用、最轻量且与 Bootstrap 5 兼容良好的选择。别用 datatables.net，它样式冲突多、初始化开销大；也别自己写 JS 控制 display: none，容易破坏响应式断点和表头/表体对齐。
关键判断：如果你的后台表格需要「点击按钮切换某列显示/隐藏」+「记住用户偏好」+「支持导出时排除隐藏列」，bootstrap-table 的 showColumns 扩展就是现成解法。
如何启用 showColumns 并绑定到按钮
必须同时引入两个 JS 文件：bootstrap-table.min.js 和 extensions/show-columns/bootstrap-table-show-columns.min.js。CSS 不需额外加——它复用 Bootstrap 的 .dropdown 和 .btn 样式。
HTML 中只需在 <table> 上加一个 <code>data-show-columns="true" 属性，并确保有 data-toggle="table"：
<table id="table" data-toggle="table" data-show-columns="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">姓名</th>
<th data-field="email">邮箱</th>
<th data-field="status">状态</th>
</tr>
</thead>
</table>
这样会在表格右上角自动生成一个「列」下拉按钮，每项对应一列，勾选即显示，取消即隐藏。
- 如果不想用默认位置，可手动插入按钮：
<button class="btn btn-secondary" data-toggle="columns">列设置</button>，再通过 JS 初始化：$('#table').bootstrapTable({ showColumns: true }) -
data-field值必须唯一，否则切换时会误操作多列 - 隐藏列后，
getSelections()和getData()返回的数据仍包含完整字段，只是 DOM 不渲染 —— 这是设计行为，不是 bug
如何让列显隐状态持久化（刷新不丢失）
默认每次刷新页面，列状态就重置。要记住用户选择，得开启 rememberOrder 和 cookie 扩展，而不是自己 localStorage 操作。
先引入：extensions/cookie/bootstrap-table-cookie.min.js（注意：它依赖 js-cookie，需提前加载）。
然后在初始化时加这两个配置项：
$('#table').bootstrapTable({
showColumns: true,
cookie: true,
cookieIdTable: 'user-table-config',
cookiesEnabled: ['columns', 'order', 'page'],
})
-
cookieIdTable必须设，否则多个表格会互相覆盖 cookie -
cookiesEnabled数组里必须包含'columns'，否则列状态不存 - Cookie 默认有效期 1 天，如需延长，加配置：
cookieExpire: '7d' - 不要在开发时依赖 Chrome 的「禁用 Cookie」调试模式，它会让
cookie扩展静默失效，现象是「点了没反应」
为什么点击列名没反应？常见卡点排查
最常遇到的是「下拉菜单点了没反应」「勾选后列没消失」「控制台报错 Cannot read property 'toggleColumn' of undefined」——基本都指向初始化时机或依赖缺失。
- 确保
bootstrap-table初始化在 DOM 加载完成之后，比如包在$(function() { ... })或DOMContentLoaded里 - 检查是否漏了
bootstrap-table.min.css：缺少它会导致.bs-checkbox样式丢失，看起来像「能点但没反馈」 - 如果表格是动态生成（例如 AJAX 加载完再
append()），不能只靠data-toggle="table"，必须手动调用：$('table').bootstrapTable('refreshOptions', { showColumns: true }) - 使用 Bootstrap 5.3+ 时，确认没混用 Bootstrap 4 的
popper.js版本，否则下拉菜单无法展开 ——bootstrap-table5.x 要求 Popper 2.x
列显隐看着简单，实际卡在「扩展链路长、依赖隐含、错误无提示」。真正省事的做法是：严格按官方扩展顺序加载 JS，用 cookieIdTable 隔离多表，以及永远手动初始化而非全靠 data-api。
