javascript 数据表 - 使用行组时计算列总数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18173344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables - Calculate Column Total when using Row Groups
提问by Redwall
I am using datatables. In addition to the regular table set up I am using datatables to add
我正在使用数据表。除了设置的常规表外，我还使用数据表添加
Row Groups- Outlined here
行组-此处概述
Column Totals- Using Footer Callbacled Outlined here
列总计-使用页脚Callbacled概述这里
I have a working Demo here http://jsfiddle.net/c5UXe/
我在这里有一个工作演示http://jsfiddle.net/c5UXe/
Everything is working fine except my totals are being calculated 1 column off to the right (as you can easily see from demo) I am pretty sure the reason is because of the way groups works and is displayed.
一切正常，除了我的总数计算在右侧 1 列（正如您可以从演示中轻松看到的那样）我很确定原因是由于组的工作方式和显示方式。
I would like to display the totals under the correct column. i.e. shift all totals 1 column left to line up correctly.
我想在正确的列下显示总数。即，将所有总数向左移动 1 列以正确排列。
The code used uses the first <td>in the row to use as the group name so for example
使用的代码使用<td>行中的第一个作为组名，例如
<td>Joe Hammer</td>is used as a group name.
<td>Joe Hammer</td>用作组名。
This is the code I am using to calculate the totals
这是我用来计算总数的代码
"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {
var columnas = [1, 2, 3, 4, 5, 6, 7]; //the columns you wish to add
for (var j in columnas) {
var columnaActual = columnas[j];
var total = 0;
for (var i = iStart; i < iEnd; i++) {
total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
}
$($(nRow).children().get(columnaActual)).html(total);
} // end
采纳答案by Chris Neilson
I believe you can fix it entirely through tweaking the JS.
我相信您可以通过调整 JS 来完全修复它。
Update the columns to add
更新要添加的列
var columnas = [2, 3, 4, 5, 6, 7, 8];
Then get columnaActual-1 instead of columnaActual
然后得到 columnaActual-1 而不是 columnaActual
$($(nRow).children().get(columnaActual-1)).html(total);
回答by Redwall
Feels weird answering this myself, but just incase anyone else has the same issue here you go.
我自己回答这个问题感觉很奇怪，但以防万一其他人在这里遇到同样的问题。
Updated JSFiddle http://jsfiddle.net/c5UXe/1/
更新了 JSFiddle http://jsfiddle.net/c5UXe/1/
I added an extra <th>to the column total and I removed the 2nd <th>in column total via CSS setting the style to none.
我添加了一个额外<th>的列总数，并<th>通过 CSS 将样式设置为无删除了列总数中的第二个。
I then Updated the Columns to add to this
然后我更新了列以添加到此
var columnas = [2, 3, 4, 5, 6, 7,8]; //the columns you wish to add
var columnas = [2, 3, 4, 5, 6, 7,8]; //the columns you wish to add
Removing the first 1and adding number 8
删除第一个1并添加数字8
It is a pretty easy fix which mostly involved tweaking the HTML rather than the JS.
这是一个非常简单的修复，主要涉及调整 HTML 而不是 JS。
