必须按顺序加载依赖、正确声明表格结构、初始化时机不能错——漏掉任意一环都会导致 bootstrapTable() 不生效或报 $.fn.bootstrapTable is not a function。
能直接用，但必须按顺序加载依赖、正确声明表格结构、初始化时机不能错——漏掉任意一环都会导致 bootstrapTable() 不生效或报 $.fn.bootstrapTable is not a function。
依赖加载顺序和版本兼容性
Bootstrap-Table 严重依赖 jQuery 和 Bootstrap 的 DOM 操作与样式系统，三者版本不匹配是「初始化失败」的头号原因。当前（2026年）稳定组合是：
-
jQuery 3.6.0（不能用 4.x，bootstrap-table尚未全面适配） -
Bootstrap 5.3.0+（推荐用bootstrap.bundle.min.js，含 Popper） -
bootstrap-table 1.22.0（最新稳定版，已支持 Bootstrap 5 主题）
CDN 引入示例（顺序不可调）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://unpkg.com/bootstrap-table@1.22.0/dist/bootstrap-table.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.0/dist/bootstrap-table.min.js"></script>
注意：bootstrap-table-zh-CN.min.js 需手动引入才能启用中文提示，且必须在 bootstrap-table.min.js 之后。
HTML 表格结构必须带 data-toggle="table" 或显式初始化
两种初始化方式二选一，混用会冲突。常见错误是只写 HTML 属性却不引入 JS，或写了 JS 却忘了删 data-toggle。
方式一（自动初始化）：在 <table> 上加属性，无需额外 JS
<pre class='brush:php;toolbar:false;'><table id="table" data-toggle="table" data-url="api/users" data-pagination="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">姓名</th>
</tr>
</thead>
</table>
</pre>
<p>方式二（手动初始化）：去掉 <code>data-toggle，用 JS 控制时机
<table id="table"></table>
<script>
$('#table').bootstrapTable({
url: 'api/users',
pagination: true,
columns: [{field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}]
});
</script>
⚠️ 容易踩的坑：data-toggle="table" 会在 DOM Ready 后立即执行初始化，如果此时数据 URL 返回 401 或 CORS 错误，控制台只报请求失败，不会提示初始化逻辑被跳过。
分页/搜索等高级功能需显式启用对应 data 属性
Bootstrap-Table 默认只渲染表格，所有交互功能都得「主动打开」。比如没加 data-search="true"，搜索框根本不会出现；没设 data-pagination="true"，即使传了 total 也不会分页。
常用功能开关对照：
- 客户端分页：
data-pagination="true" data-side-pagination="client" - 服务端分页：
data-pagination="true" data-side-pagination="server"（此时需后端响应含total和rows字段） - 列筛选：
data-show-columns="true" - 导出 Excel：
data-show-export="true"+ 单独引入bootstrap-table-export.min.js和tableExport.min.js
注意：data-side-pagination 值只能是 "client" 或 "server"，写成 true 或 "on" 会被忽略。
初始化失败时优先检查控制台报错和网络请求
多数集成问题不是代码写错，而是环境链路断了。快速定位步骤：
- 打开浏览器开发者工具 → Console 标签页，看是否有
$.fn.bootstrapTable is not a function（依赖没加载完）或Cannot read property 'extend' of undefined（jQuery 冲突） - Network 标签页过滤
XHR，确认data-url请求是否发出、状态码是否为 200、返回格式是否为 JSON 数组（客户端分页）或含total/rows的对象（服务端分页） - 检查元素面板，看
<table> 是否被插件重写为带 <code>.bootstrap-table类的嵌套结构 —— 没有就说明初始化根本没跑。真正麻烦的是混合使用了其他表格插件（如 DataTables），它们会劫持
$().DataTable()或覆盖$.fn方法，这时候必须用命名空间隔离或统一技术栈。
