已初始化DataTable后如何同时保留row.add与footerCallback功能？

你遇到的这个问题其实是DataTables的常见坑——它不允许对同一个表格DOM元素重复调用DataTable()方法初始化。你第一次已经通过var table = $('#example').DataTable();创建了表格实例，第二次又调用$('#example').DataTable({ footerCallback: ... })，相当于试图重复初始化，自然会抛出"已初始化"的错误。

下面给你两种靠谱的解决方法，按需选择：

方法一：初始化时就整合所有配置（推荐） #

最规范的做法是在第一次初始化表格时，就把footerCallback配置进去，后续直接用保存的实例调用row.add()添加行。这样既避免了重复初始化，又能完美保留两个功能：

// 一次性完成初始化，包含footerCallback配置
var table = $('#example').DataTable({
  "footerCallback": function (row, data, start, end, display) {
    // 这里写你的列求和逻辑，举个示例：
    var api = this.api();
    // 对第2列（索引从0开始）求和
    var total = api.column(1)
      .data()
      .reduce(function(a, b) {
        // 根据你的数据类型调整转换逻辑，比如是数字就转成Number
        return Number(a) + Number(b);
      }, 0);
    
    // 将求和结果插入到对应列的footer单元格中
    $(api.column(1).footer()).html('总计：' + total);
  }
});

// 后续用保存的table实例添加行，记得调用draw()刷新表格触发footerCallback
table.row.add([
  "新行内容1",
  "50",
  "其他列数据"
]).draw();

方法二：已初始化实例后，用draw事件替代footerCallback #

如果因为某些原因你没办法修改第一次的初始化代码，也可以通过监听表格的draw.dt事件来实现求和逻辑——因为footerCallback本质上就是在表格每次绘制（比如添加行、分页）时触发的，和draw.dt事件的时机一致：

// 已经存在的表格实例
var table = $('#example').DataTable();

// 监听draw事件，实现和footerCallback一样的效果
table.on('draw.dt', function() {
  var api = table.api();
  // 同样的求和逻辑示例
  var total = api.column(1)
    .data()
    .reduce(function(a, b) {
      return Number(a) + Number(b);
    }, 0);
  
  $(api.column(1).footer()).html('总计：' + total);
});

// 添加行的逻辑不变，draw()会触发上面的事件
table.row.add([
  "新行内容2",
  "30",
  "其他列数据"
]).draw();

注意事项 #

• 调用row.add()后一定要加.draw()，否则表格不会刷新，求和逻辑也不会触发。
• 如果你的数据是字符串类型，记得在求和前转换成数字（比如用Number()或parseInt()），避免出现字符串拼接的错误。

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