Bootstrap Table加载异常：加载提示无法自动消失问题咨询

我开发了一个包含Bootstrap Table的页面，表格代码如下：

<table class="display table table-bordered table-striped w-100"
                                        data-click-to-select="true" data-unique-id="NoticeID"
                                        data-pagination="true" data-sortable="true" data-page-size="10"
                                        data-single-select="true" data-maintain-selected="true"
                                        data-id-field="NoticeID" id="notices" name="notices">
      <thead>
          <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="NoticeID" data-sortable="true">ID</th>
              <th data-field="Title" data-sortable="true">Title</th>
              <th data-field="TimesViewed" data-sortable="true">Views</th>
              <th data-field="IsActive" data-sortable="true">Active</th>
          </tr>
      </thead>
</table>

页面加载时调用以下AJAX函数填充数据：

function loadNotices() {
    $.ajax({
        url: '../handlers/getusernotices.ashx',
        data: null,
        method: 'post',
        dataType: 'json',
        success: function (data) {
            $('#notices').bootstrapTable({
                data: data.Notices
            });
            $('#notices').bootstrapTable('load', data.Notices);
        },
        error: function (e) {
            console.log(e.responseText);
        }
    });
}

所有功能正常，但加载数据时的"Loading, please wait..."提示在数据加载完成后始终不消失，请问该如何解决？

问题根源及解决步骤 #

• 重复执行初始化与数据加载操作：你在AJAX成功回调中先调用bootstrapTable({data: data.Notices})初始化表格，紧接着又调用bootstrapTable('load', data.Notices)加载数据，这会导致Bootstrap Table内部状态混乱，加载提示无法被正确关闭。

修正方案（二选一即可） #

1. 仅在AJAX成功后初始化表格
   去掉重复的load调用，只保留初始化操作：

   function loadNotices() {
       $.ajax({
           url: '../handlers/getusernotices.ashx',
           data: null,
           method: 'post',
           dataType: 'json',
           success: function (data) {
               // 直接初始化表格并传入数据
               $('#notices').bootstrapTable({
                   data: data.Notices
               });
           },
           error: function (e) {
               console.log(e.responseText);
               // 错误时手动关闭加载提示
               $('#notices').bootstrapTable('hideLoading');
           }
       });
   }
   

2. 先初始化表格，再通过load方法加载数据
   在页面加载完成时先初始化表格（无需传入data），然后在AJAX成功后调用load方法：

   // 页面初始化时先配置表格
   $(function() {
       $('#notices').bootstrapTable({
           // 保留原有data-*属性配置，无需重复编写
       });
   });
   
   function loadNotices() {
       $.ajax({
           url: '../handlers/getusernotices.ashx',
           data: null,
           method: 'post',
           dataType: 'json',
           success: function (data) {
               // 仅调用load方法加载数据
               $('#notices').bootstrapTable('load', data.Notices);
           },
           error: function (e) {
               console.log(e.responseText);
               $('#notices').bootstrapTable('hideLoading');
           }
       });
   }
   

3. 手动强制关闭加载提示（应急方案）
   如果上述方案仍有问题，可以在数据加载完成后手动调用方法关闭提示：

   success: function (data) {
       $('#notices').bootstrapTable({
           data: data.Notices
       });
       // 手动隐藏加载提示
       $('#notices').bootstrapTable('hideLoading');
   }
   

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