AngularJS Datatables插入带有列总计的表尾
您知道如何轻松地将简单页脚(tfoot)插入数据表吗?AngularJS Datatables插入带有列总计的表尾,angularjs,datatables,footer,totals,Angularjs,Datatables,Footer,Totals,您知道如何轻松地将简单页脚(tfoot)插入数据表吗? 我在Angular Controller中构建了数据表,如下所示: function Controller(DTOptionsBuilder, DTColumnBuilder, $compile) { var ctrl = this; ctrl.totals = {}; var initDatatable = function() { ctrl.dtInstance = {}; ctrl.
我在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()”来定义表的页脚,但是datatables不会自动生成
,因此我必须手动将其创建到模板中:
<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标记,但我无法从serverData()中获取要插入单元格的总值
每个人都能帮我吗?如果您是手动创建此页脚,那么对于表,您使用的是哪个元素?你能详细说明一下吗?或者将您的表视图粘贴到此处。您好,上面的html代码是我的(压缩)表视图。它以以下节标记开始:。。。有什么解决办法吗?我也有同样的问题