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

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

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

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

1 个答案: