动态加载div中bootstrap-table无法加载数据的问题求助

架构老林

2026-8-13

解决动态加载Bootstrap Table后无法加载数据的问题

确保动态加载后手动初始化表格
jQuery的load()是异步操作，动态加载的DOM不会触发页面初始化时的Bootstrap Table自动识别逻辑。必须在load()的回调函数里手动初始化表格，不要依赖fragment中的data-toggle="table"这类自动初始化属性。示例代码：
```
$('main').load('fragments/fragment.html', function() {
  $('#your-table-id').bootstrapTable({
    url: 'datos/datos.json',
    // 复制page1中表格的所有配置项
  });
});
```
检查请求路径是否正确
page2.html与page1.html的目录层级可能不同，导致datos/datos.json的相对路径失效。打开浏览器Network面板，查看该请求是否返回404。如果路径错误，调整为绝对路径或适配page2的相对路径（比如../datos/datos.json，根据实际目录结构修改）。
避免依赖脚本冲突或重复加载
确认page2.html已正确引入Bootstrap Table的JS/CSS文件，且版本与page1一致。不要在fragment.html中重复引入这些依赖脚本，否则会导致方法冲突，引发初始化失败。

规范refresh方法的调用时机
如果需要使用refresh或refreshOptions，必须确保表格已完成初始化。示例：

$('main').load('fragments/fragment.html', function() {
  var $table = $('#your-table-id');
  // 先初始化表格
  $table.bootstrapTable({ url: 'datos/datos.json' });
  // 必要时手动触发刷新
  $table.bootstrapTable('refresh');
  // 若需修改配置后刷新
  $table.bootstrapTable('refreshOptions', { url: 'datos/datos.json' });
});