如何在Ajax POST请求后重新加载Bootstrap Table（ASP.NET MVC场景）

嘿，刚好我之前在ASP.NET MVC项目里用Bootstrap Table的时候也遇到过这个需求，给你几个实用的解决办法：

这是最省心的方式，Bootstrap Table本身就提供了刷新数据的API，你只需要在Ajax POST请求的成功回调里调用它就行。

首先确保你的表格初始化是正常的（如果一开始用ViewBag加载静态数据，初始化代码大概是这样）：

$(function() {
    $('#cT').bootstrapTable({
        data: @Html.Raw(Json.Encode(ViewBag.YourTableData)),
        columns: [
            { field: 'Name', title: 'Name' },
            { field: 'DateTime', title: 'Date & time' },
            { field: 'Type', title: 'Type' },
            { field: 'HomeworkDone', title: 'Homework done' },
            // 剩下的列配置
        ]
    });
});

然后写你的Ajax POST请求，在成功后触发刷新：

// 假设这是你的提交按钮点击事件
$('#yourSubmitBtn').click(function() {
    $.ajax({
        url: '@Url.Action("YourPostAction", "YourController")', // 替换成你的POST接口地址
        type: 'POST',
        data: {
            // 这里放你要提交的参数，比如name: $('#nameInput').val()
        },
        success: function(response) {
            // 先给用户个反馈，比如提示操作成功
            alert('操作已完成！');
            
            // 核心：调用refresh方法重新加载表格
            // 如果你的表格是配置了从服务器接口拉数据，refresh会自动重新请求接口
            $('#cT').bootstrapTable('refresh');
            
            // 要是你是用本地数据（比如从POST响应里拿到新数据），可以用load方法直接替换数据源：
            // $('#cT').bootstrapTable('load', response.NewTableData);
        },
        error: function(xhr) {
            console.error('请求出错了:', xhr.responseText);
            alert('操作失败，请稍后重试');
        }
    });
});

如果你的表格有复杂的配置，或者需要完全重置状态，可以先销毁现有表格，再用最新数据重新初始化：

$.ajax({
    url: '@Url.Action("YourPostAction", "YourController")',
    type: 'POST',
    data: { /* 提交参数 */ },
    success: function() {
        // 先销毁旧表格
        $('#cT').bootstrapTable('destroy');
        
        // 从服务器拉取最新数据，再重新初始化
        $.get('@Url.Action("GetUpdatedData", "YourController")', function(latestData) {
            $('#cT').bootstrapTable({
                data: latestData,
                columns: [
                    // 列配置和之前一致
                    { field: 'Name', title: 'Name' },
                    { field: 'DateTime', title: 'Date & time' },
                    { field: 'Type', title: 'Type' },
                    { field: 'HomeworkDone', title: 'Homework done' }
                ]
            });
        });
    }
});

• 建议把原来用ViewBag传数据的方式改成通过服务器接口获取数据，这样刷新的时候能直接拿到最新的数据库数据，毕竟ViewBag是页面加载时生成的静态数据，动态刷新没法更新它。
• 如果刷新时需要传递额外参数给接口，可以用refreshOptions来配置：

  $('#cT').bootstrapTable('refreshOptions', {
      queryParams: {
          filter: 'someValue',
          page: 1
      }
  });
  

• 确保你的POST接口执行完数据库操作后，后续的Get接口能正确返回更新后的数据哦~

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