数据表“footerCallback”函数未在页脚的两列中显示结果（仅在一列中）

Question

我尝试使用适用于单列总和的现有代码来使总和显示在两列中 - 我试图将它们放入一个数组中，但它不起作用。不能为此使用简单的数组解决方案吗？

这是https://jsfiddle.net/setbon/3mvmhL1v/

这是JS：

 $(document).ready(function() {
var table = $('#example').DataTable( {
    rowReorder: {
    selector: 'td:nth-child(2)'
  },
  responsive: true,
  scrollX: true,
  scrollY: "80vh",
    scrollCollapse: true,
        paging: true,
  lengthChange: false,
  lengthMenu: [ [10, 25, -1], [10, 25, "All"] ],
  "order": [[ 0, "asc" ]],
  "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( [3,4] )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( [3,4], { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( [3,4] ).footer() ).html(
            total
        );
    },
    buttons: ['pdf']
} );

table.buttons().container()
    .appendTo( '#example_wrapper .small-6.columns:eq(0)' );

}); $(文档).foundation();

因为我希望汇总多个列，我现在需要为每个 https://datatables.net/plug-ins/api/sum() 使用一个额外的插件吗？即使对于那个插件，我也无法找到一个示例，其中包含多个汇总的列，我可以复制并轻松自定义。

In this SO question 代码与我所拥有的非常不同，让我感到困惑。还有this SO answer is difficult for me to understand and I don't know how to apply to resolve my problem

Answer 1

工作示例：https://jsfiddle.net/guanzo/wx5mr9vs/1/

如果我理解正确，您希望两列中的总和相同。这很容易实现，您不需要插件。

首先，编号为 8 的行中有“东京”而不是薪水数字。这就是为什么您的 jsfiddle 中有 $NaN 的原因。

其次，api.column() 用于选择单个列。要选择多个列，只需将函数调用复数 api.columns([3,4]) 即可。在您提供的 jsFiddle 中，您只有 4 列，这意味着您没有第 4 列索引，所以我做了

$( api.columns([2,3]).footer() ).html(
    '$'+total
);

文档组织良好：https://datatables.net/reference/api/

编辑：每个列的页脚都包含它自己的总和

https://jsfiddle.net/3mvmhL1v/4/

基本上，您需要单独对每一列执行求和操作。 将两列的总和合并为一个变量对您没有帮助。

var sumColumns = [3,4]

sumColumns.forEach(function(colIndex){
      // Total over all pages
    var total = api
        .column(colIndex)
        .data()
        .reduce( function (a, b) {
            return intVal(a) + intVal(b);
        }, 0 );

    // Update footer
    $( api.columns(colIndex).footer() ).html(
        total
    );
})