如何从Ajax响应更新Bootstrap-Table列？避免无限循环方案咨询

API 探路者

2026-7-27

Bootstrap-Table 动态列+数据加载的优雅解决方案

问题根源

你遇到的无限循环，本质是在表格内置的ajax回调里调用refreshOptions后，表格重建会再次触发内置的ajax请求，形成「请求→更新表格→再请求」的死循环。要解决这个问题，核心是把数据请求和表格初始化/更新的流程完全掌握在自己手里，别依赖表格的自动ajax触发。

具体实现方案

1. 手动发起API请求，拿到完整数据

放弃用Bootstrap-Table的ajax配置自动拉数据，直接用原生fetch、jQuery的$.ajax或者axios手动请求API，这样能先拿到包含列配置和行数据的完整响应：

// 用jQuery举例子，其他请求库逻辑类似
$.get('/你的接口地址', function(res) {
  // res里要包含columns（列配置数组）和data（行数据数组）
  updateTable(res.columns, res.data);
});

2. 初始化或更新表格

根据表格是否已初始化，分两种情况处理：

表格还没创建：直接用拿到的列和数据初始化表格

function updateTable(columns, data) {
  $('#table').bootstrapTable({
    columns: columns,
    data: data,
    // 其他你需要的配置，比如分页、排序之类的
  });
}

表格已经存在：调用refreshOptions更新列，同时临时关闭自动ajax请求，避免触发循环：

function updateTable(columns, data) {
  $('#table').bootstrapTable('refreshOptions', {
    columns: columns,
    ajax: false, // 关掉自动请求，防止循环
    data: data
  });
  // 如果之后需要恢复自动ajax功能，再重新配置ajax选项就行
}

3. 封装刷新函数（可选）

如果需要后续手动触发刷新，把请求+更新的逻辑封装成函数就行：

function refreshTable() {
  $.get('/你的接口地址', function(res) {
    $('#table').bootstrapTable('refreshOptions', {
      columns: res.columns,
      data: res.data,
      ajax: false
    });
  });
}
// 要刷新的时候直接调这个函数
// refreshTable();