javascript - 带有AJAX的数据表，总和加总页脚

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

    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');
    }

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

html中的表格如下所示：

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

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

提前致谢：）

最佳答案

我在这里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'
        ]
    }
);

关于javascript - 带有AJAX的数据表，总和加总页脚，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51624014/