带有 AJAX 的数据表，求和并添加总页脚

Question

我有一个由以下代码创建的数据表

    var data = results.rows;
    var column_names = results.headers;

    if (column_names) {
        var columns = [];
        var total = 0;
        for (var i = 0; i < column_names.length; i++) {
             columns[i] = {
                  'title': column_names[i],
                  'data': i
            }
        };

        dataTable=$('#report').DataTable( {
            columns: columns,
            data: data,
            paging: false,
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        }
        );
        showTable();
        dataTable.columns.adjust().draw();
    } else {
        alert('No Results Found');
    }

我想在表中添加一个页脚，该表包含第二列的总和，并有文字显示“总计：”

html中的表格如下：

    <table id="report" class="compact"> 
    </table>

我尝试在 html 中添加页脚，但在重新运行报表时它被覆盖，因此需要在代码的顶部完成此操作，以便在每次创建表时显示。

提前致谢：)

Answer 1

我在这里找到了一个例子http://jsbin.com/putiyep/edit?js。

它看起来不会像您希望的那样漂亮，但它会完成工作。 它利用 API 的 footerCallback 并使用表的列索引和基本数学来返回您的总数。

代码的数据表部分如下所示：

dataTable=$('#report').DataTable( {
        columns: columns,
        data: data,
        paging: false,
        dom: 'Bfrtip',
        "footerCallback": function (tfoot, data, start, end, display) {
            var api = this.api();
            var p = api.column(2).data().reduce(function (a, b) {
                return a + b;
            }, 0)
            $(api.column(2).footer()).html("Total: "+p);
        },
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    }
);