DataTables导出无法加载JS更新后的页脚内容该如何解决

我懂你遇到的麻烦了——你已经用makeThousands()把页脚数字格式化成了千分位，页面上显示完全正常，但DataTables的Excel导出功能却只认页面加载时的初始页脚值，完全没用到你更新后的内容。这其实是DataTables的一个常见特性：它会在初始化时把页脚的初始数据存入内部缓存，后续你直接通过JS修改DOM的话，它并不会自动同步这个变化，导出时就还是用缓存里的旧值。

下面给你两种可行的解决办法，选哪种都能搞定：

方法一：更新DataTables内部的页脚数据 #

在你执行完makeThousands()格式化页脚后，手动同步DataTables的内部数据存储，让它和DOM里的最新内容保持一致：

// 先运行你的格式化函数
makeThousands();

// 获取DataTables实例
const table = $('#myTable01').DataTable();

// 遍历所有列，更新对应页脚的内部数据
table.columns().every(function() {
  const colIndex = this.index();
  // 定位当前列的页脚单元格（假设你的页脚单元格带.cols_sum类）
  const footerCell = $(this.footer()).find('.cols_sum');
  
  if (footerCell.length) {
    // 将DataTables内部存储的页脚值替换为DOM里的最新文本
    this.footer(footerCell.text());
  }
});

方法二：自定义导出时的页脚读取逻辑 #

直接在Excel导出按钮的配置里，指定导出时读取DOM中的最新页脚内容，绕过DataTables的内部缓存：

$('#myTable01').DataTable({
  'paging': false,
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'excelHtml5',
      footer: true,
      exportOptions: {
        format: {
          // 自定义页脚内容的读取逻辑
          footer: function(data, column) {
            // 直接返回当前列页脚单元格的最新文本
            return $(table.column(column).footer()).text();
          }
        }
      }
    }
    // { extend: 'pdfHtml5', footer: true },
  ]
});

小提示 #

如果你的makeThousands()是通过修改单元格的HTML内容来实现千分位格式的，记得用text()而不是html()来获取内容，避免导出的Excel里出现多余的HTML标签或者格式符号。

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