AngularJS数据表插入带有列总数的表页脚答案

【问题标题】：AngularJS Datatables insert Table-Footer with column totalsAngularJS数据表插入带有列总数的表页脚
【发布时间】：2017-03-03 10:43:49
【问题描述】：

您知道如何轻松地将简单的页脚 (tfoot) 插入到我的数据表中吗？
我已经在我的 Angular-Controller 中构建了我的数据表，如下所示：

function Controller(DTOptionsBuilder, DTColumnBuilder, $compile) {
   var ctrl = this;
    ctrl.totals = {};

   var initDatatable = function() {
       ctrl.dtInstance = {};

       ctrl.dtColumns = [
          DTColumnBuilder.newColumn('id', 'Id'),
          DTColumnBuilder.newColumn('title', 'Name').renderWith(actionsHtml),
    // ... some columns here
       ];

    var renderDatatable = function() {
    ctrl.dtOptions = DTOptionsBuilder
        .newOptions()
        .withFnServerData(serverData)
        .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('createdRow', createdRow)
        .withOption('fnFooterCallback', footerCallback);

   function createdRow(row, data, dataIndex) {
        $compile(angular.element(row).contents())($scope);
    }

    function serverData(sSource, aoData, fnCallback, oSettings) {
    // get data from Server by ajax
    // and then sum the total values
        ctrl.total.col1 += data1;
        ctrl.total.col2 += data2;
        ctrl.total.col3 += data3;

        var records = {
                'draw': draw,
                'recordsTotal': entries.length,
                'recordsFiltered': entries.length,
                'data': entries   // filtered data entries
            };

        fnCallback(records);
    }

    function activateDatatable() {
       initDatatable();
       renderDatatable();
     }
     activateDatatable();
}

代码被我压缩以查看一般结构。
现在我创建了函数“footerCallback()”来定义表格页脚，但是数据表不会自动生成<tfoot>，因此我必须在模板中手动创建它：

<table datatable="" dt-instance="ctrl.dtInstance" dt-options="ctrl.dtOptions" dt-columns="ctrl.dtColumns" class="table table-striped table-bordered">
            <tfoot>
                <tr>
                    <th></th>
                </tr>
            </tfoot>
        </table>

经过长时间的研究，我发现我应该将每个 th-tag 生成到页脚中，但我无法从 serverData() 中获取我的总值以插入到单元格中。

大家可以帮帮我吗？

【问题讨论】：

如果您手动创建此页脚，那么对于表格，您使用的是哪个元素？你能详细说明吗？或在此处粘贴您的表格视图
您好，您看到的上面的 html 代码是我的（压缩的）表格视图。它以这个部分标签开头：
...
有什么解决办法吗？我也有同样的问题

标签： angularjs datatables footer

【解决方案1】：

我知道它是旧的，但为了完成：

要使用 footerCallback，您必须将此 datatables plugin sum 更改为 angularjs 方式。（drawCallback也有类似的方法）

.withOption('footerCallback', function () {
    var api = this.api();
    total = api.column(5).data()
                         .flatten()
                         .reduce( function (a,b) {
                             if ( typeof a === 'string' ) {a = a.replace(/[^\d.-]/g, '') * 1;}
                             if ( typeof b === 'string' ) {b = b.replace(/[^\d.-]/g, '') * 1;}
                             return a + b;
                             }, 0);
    $( api.columns(5).footer() ).html( total );
})

您甚至可以对页脚使用渲染，以保持数字本地化（和货币）。例如借助datatables plugin intl

    var renderit = $.fn.dataTable.render.intlNumber('fr', {style: 'currency',currency: 'EUR'} );
    $( api.columns(5).footer() ).html( renderit(total,'display') );

【讨论】：