怎么在Bootstrap中集成Bootstrap-Table插件-Bootstrap教程-PHP中文网

必须按顺序加载依赖、正确声明表格结构、初始化时机不能错——漏掉任意一环都会导致 bootstrapTable() 不生效或报 $.fn.bootstrapTable is not a function。

怎么在bootstrap中集成bootstrap-table插件

能直接用，但必须按顺序加载依赖、正确声明表格结构、初始化时机不能错——漏掉任意一环都会导致 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。

方式一（自动初始化）：在

 上加属性，无需额外 JS

ID	姓名


方式二（手动初始化）：去掉 data-toggle，用 JS 控制时机


<script>
  $('#table').bootstrapTable({
    url: 'api/users',
    pagination: true,
    columns: [{field: 'id', title: 'ID'}, {field: 'name', title: '&#22995;&#21517;'}]
  });
</script>⚠️ 容易踩的坑：data-toggle="table" 会在 DOM Ready 后立即执行初始化，如果此时数据 URL 返回 401 或 CORS 错误，控制台只报请求失败，不会提示初始化逻辑被跳过。

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										
分页/搜索等高级功能需显式启用对应 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 的对象（服务端分页）
检查元素面板，看  是否被插件重写为带 .bootstrap-table 类的嵌套结构 —— 没有就说明初始化根本没跑。
真正麻烦的是混合使用了其他表格插件（如 DataTables），它们会劫持 $().DataTable() 或覆盖 $.fn 方法，这时候必须用命名空间隔离或统一技术栈。