Bootstrap Table刷新按钮及自定义按钮无法加载最新数据求助

我已配置Bootstrap Table显示工具栏刷新按钮：

data-show-refresh="true"

表格的data-url属性配置正确，页面加载时能正常填充数据，且请求可到达对应控制器方法。

但点击刷新按钮时，请求能到达正确的控制器方法，后端返回的JSON是更新后的数据（浏览器已验证），但表格仅短暂空白后恢复旧数据。刷新整个页面（返回View而非JSON）则能显示更新后的值。

我不想通过jQuery事件触发刷新，想确认是否无法使用Bootstrap Table自带的工具栏刷新按钮？

另外我添加了自定义按钮调用同一控制器方法，返回的JSON确实是更新后的，但执行以下JS代码后，表格依然显示旧数据：

$.ajax({
    url: '/Home/RefrescarTabla',
    method: 'GET',
    data: {},
    dataType: 'json',
    cache: false,
    success: function (data) {
        table.bootstrapTable('load', data);
        
        table.bootstrapTable('destroy');
        table.bootstrapTable();

        $('#table').bootstrapTable('destroy');
        $('#table').bootstrapTable({
            data: data
        });

    },
    error: function (error) {
    }
});

我尝试了多种禁用缓存的方案：

• Bootstrap Table中设置：

  data-cache="false"
  

• 控制器添加特性：

  [ResponseCache(NoStore = true)]
  

• 在.NET 8 MVC控制器中添加响应头：

  Response.Headers["Cache-Control"] = "no-cache, no-store, must-revalidate";
  Response.Headers["Pragma"] = "no-cache";
  Response.Headers["Expires"] = "0";
  

更换浏览器或使用无痕模式后问题依旧。

我的表格代码如下：

<table id="tbl" class="table table-bordered table-striped table-hover"
       data-locale="es-ES"
       data-toolbar="#toolbar"
       data-toggle="table"
       data-search="false"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-fullscreen="true"
       data-show-columns="true"
       data-show-columns-toggle-all="true"
       data-detail-view="false"
       data-show-export="true"
       data-export-types="['json', 'xml', 'csv' , 'txt' , 'sql', 'xlsx' , 'pdf' ]"
       data-export-data-type="all"
       data-click-to-select="false"
       data-minimum-count-columns="2"
       data-show-pagination-switch="false"
       data-pagination="true"
       data-side-pagination="client"
       data-page-list="[10, 25, 50, 100, all]"
       data-show-footer="true"
       data-filter-control="true"
       data-show-search-clear-button="true"
       data-url="/Home/Method">
    <thead style="background-color: rgba(200, 200, 200, 0.8);">
        <tr>
            <th data-field="property1" data-sortable="true" data-switchable="false" data-filter-control="input">property1</th>
            <th data-field="property2" data-sortable="true" data-switchable="false" data-filter-control="input">property2</th>
        </tr>
    </thead>

    <tbody id="tbl_bod" style="background-color: rgba(255, 255, 255, 0.8);">
        @if (Model != null && Model.items != null)
        {
            @foreach (Class1 obj in Model.items)
            {
                <tr>
                    
                    <td>@obj.property1</td>
                    <td>@obj.property2</td>
                </tr>
            }
        }
    </tbody>
</table>

原因分析 #

核心问题出在同时使用了服务器端渲染的tbody静态内容和Bootstrap Table的data-url异步加载：

1. 页面加载时，Bootstrap Table会先读取Razor语法渲染的tbody静态数据，因配置了data-side-pagination="client"（客户端分页），表格会优先使用已有静态数据作为数据源，而非接口返回的新数据。
2. 点击刷新按钮时，Bootstrap Table虽会重新请求接口获取新数据，但客户端分页模式下，表格内部数据源未被正确替换，仍被初始静态数据覆盖，导致显示旧内容。

解决方案 #

1. 移除静态渲染的tbody内容：
   保留thead，删除tbody里的Razor循环代码，让Bootstrap Table完全通过data-url加载数据，避免静态数据与异步数据冲突：

   <tbody id="tbl_bod" style="background-color: rgba(255, 255, 255, 0.8);">
       <!-- 留空，由Bootstrap Table自动填充 -->
   </tbody>
   

2. 确认data-url返回的数据格式正确：
   客户端分页模式下，后端直接返回数据数组即可；若后续改用服务器端分页，需返回包含total和rows的结构对象。
3. 简化自定义刷新按钮的JS代码：
   无需重复销毁和初始化，直接调用load方法即可：

   $.ajax({
       url: '/Home/RefrescarTabla',
       method: 'GET',
       data: {},
       dataType: 'json',
       cache: false,
       success: function (data) {
           $('#tbl').bootstrapTable('load', data);
       },
       error: function (error) {
       }
   });
   

   解决数据源冲突后，Bootstrap Table自带的刷新按钮即可正常工作。

内容的提问来源于stack exchange，提问作者Kenzo_Gilead