Bootstrap Table 不是通过按钮刷新新数据，而是通过重新加载来完成

Question

嗯，我已经配置了引导表以在工具栏中显示刷新按钮。

data-show-refresh="true"

data-url 表属性已正确配置。证明这一点的是，当您加载页面时，表格已正确填充。另外，我已经验证了控制器对应的方法达到了

但是如果您点击工具栏上的刷新按钮，则会发生这种情况： 我们到达了正确控制器的正确方法，生成了正确的模型，从该正确的模型创建了正确的 json，该 json 到达了用户（我从浏览器中检查），但表不会更新已存在的数据改变了数据库。 无论如何，很奇怪，当我点击刷新时，尽管它什么也没做，但表格暂时保持空白，然后数据再次出现。好像它刷新了一些东西，但没有。

如果我重新加载页面（并且仅返回 View("myview",model)，而不是 Json(model)），则将显示更新的值。我找不到错误，任何帮助，我将不胜感激。

阅读文档，我看到了如何从 jquery 中的事件生成表的刷新。我不喜欢这样做。 无法使用此引导表中包含的工具栏刷新按钮???

我添加了一个刷新表格的按钮，在控制器中调用相同的方法。我再次验证了提供的 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) {
    }
});

仍然无法工作。甚至，我看到表是如何被破坏的，但正在加载相同的旧数据。

我尝试强制不使用缓存，方法是： 在引导表中

data-cache="false"

或从控制器

[ResponseCache(NoStore = true)]

说实话，快疯了。

<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>

此外，我意识到在其他浏览器或使用隐身模式时仍然会发生该错误。

我在 NET 8 的 MVC 控制器中添加了这些 Headers 以避免使用缓存。也不好用。

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

有什么想法吗？你知道会发生什么吗？非常感谢

Answer 1

嗯，我终于这样解决了。对于我来说，这是一个可以满足我的需求的完全可以接受的解决方案。我希望它对您有所帮助，或者给您一些开始的机会。

我不使用 boostrap 表的集成选项进行刷新，但我创建了一个自定义按钮，可以进行 ajax 调用并带来带有数据的 json。

我在某些表配置参数以及清除行并将其添加到表中时遇到了问题。最后，我应用了销毁和空，以最终加载我之前保存的表的选项。

<div id="toolbar">
    <button type="button" class="btn btn-primary-custom" id="refrescar-tabla"><i class="fa fa-sync"></i></button>
</div>

<table id="tbl" class="table table-bordered table-striped table-hover"
       data-toolbar="#toolbar"
       data-toggle="table"
       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-cache="false"
       data-show-search-clear-button="true">
 <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>



 const table = $('#tbl');

 var tableOptions = $('#tbl').bootstrapTable('getOptions');

 $.ajax({
     url: '/Home/Refresh',
     method: 'GET',
     data: {},
     dataType: 'json',
     cache: false,
     success: function (data) {

         table.bootstrapTable('destroy');

         $('#tbl_bod').empty();

         $.each(data, function (index, element) {
             var row = $('<tr>');
             row.append($('<td>').text(element.property1));
             row.append($('<td>').text(element.property2));

             $('#tbl_bod').append(row);
         });

         $('#tbl').bootstrapTable(tableOptions);
     },
     error: function (error) {
     }
 });