Question

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

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

我会压缩守则以了解一般结构现在我创建了函数＆＃34; footerCallback（）＆＃34;定义表格页脚，但数据表不会自动生成<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（）获取总值以插入单元格中。

大家可以帮助我吗？

AngularJS数据表插入表格页脚，列总数为

0 个答案: