Bootstrap Table重置默认排序后页脚总和显示为0的问题排查

看起来你遇到的核心问题是：重置默认排序后，虽然this.footer已经计算出正确的总和，但bootstrap-table没有渲染这个正确的页脚，反而显示0。这大概率是因为重新初始化表格时，页脚的更新逻辑没有和表格的生命周期同步导致的。

可能的原因 #

1. 你在bootstrap()函数中初始化表格后，只是设置了this.footer变量，但bootstrap-table组件并不知道这个变量的变化，自然不会自动更新页脚DOM。
2. 调用destroy后重新初始化表格的过程中，页脚的DOM元素可能还未完全创建，此时计算的总和无法被正确渲染。
3. 你没有在表格初始化配置中明确开启页脚支持，或者没有将页脚数据和表格的列配置关联起来。

具体解决方案 #

方案1：用resetSort替代destroy（最推荐）

其实bootstrap-table自带重置排序的方法，完全不需要销毁再重建表格，这样能避免很多DOM重建带来的问题：

setDefaultSorting() {
  let $table = this.getTable();
  // 删除保存排序的cookie
  $table.bootstrapTable('deleteCookie', 'sortOrder');
  $table.bootstrapTable('deleteCookie', 'sortName');
  // 直接调用内置方法重置排序
  $table.bootstrapTable('resetSort');
  // 重新计算总和并更新页脚
  this.calculateTotals(this.data);
  this.updateTableFooter(); // 新增这个方法来手动更新页脚DOM
}

方案2：手动同步页脚DOM与this.footer数据

如果必须保留destroy重建的逻辑，那需要在表格渲染完成后，手动将this.footer的内容渲染到页脚：

1. 先新增一个更新页脚的方法：

private updateTableFooter() {
  const $table = this.getTable();
  const $footer = $table.find('tfoot');
  // 清空原有页脚内容
  $footer.empty();
  // 根据this.footer创建新的页脚行
  const footerRow = $('<tr>');
  this.footer.columns.forEach(col => {
    const cellAttrs = {
      colspan: col.span,
      align: col.align || 'left'
    };
    const footerCell = $('<td>', cellAttrs).text(col.title);
    footerRow.append(footerCell);
  });
  $footer.append(footerRow);
}

2. 在bootstrap()函数中，监听表格的post-body.bs.table事件（表格渲染完成的钩子），再调用更新方法：

public bootstrap(data) {
  this.data = data;
  let $table = this.getTable();
  let id = this.id;
  $table.bootstrapTable({
    // 你的原有配置...
    footer: true, // 确保开启页脚支持
    columns: [ /* 你的列配置 */ ]
  });

  // 其他事件监听...

  // 表格渲染完成后更新页脚
  $table.on('post-body.bs.table', () => {
    this.calculateTotals(data);
    this.updateTableFooter();
  });

  // 其他代码...
}

方案3：检查calculateTotals中的潜在问题

注意到你在计算总和时，exposureString变量只声明但未赋值：

let exposureString: string;
var total = Formatter.exposureFormatter(this.sum(data, exposureString));

虽然你说调试时this.footer是正确的，但还是建议确认this.sum函数是否能处理undefined的参数，避免后续出现隐藏问题。

为什么之前的方法无效？ #

• 调用destroy后重建表格，会完全清空表格的DOM结构，包括页脚元素。此时你虽然计算了正确的this.footer，但没有将其绑定到新创建的表格DOM上，所以表格只能显示默认的0。
• 直接重新加载表格，如果没有同步更新页脚的逻辑，表格会使用初始化时的默认页脚配置（也就是0），而不是你计算后的this.footer。

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