我已经使用DataTable按列分组，如下所示。
| 项目 | 任务 | 工作量(小时(|
|---|---|---|
| Sakthi | -------- | |
| HTML页面 | 设计 | <2.30>|
| HTML页面 | JS | 0.30 |
| HTML页面 | css | 5.00 |
| Vel | -------- | ---------------|
| HTML页面 | Tesing | 4.00 |
| HTML页面 | 测试用例 | 4.00
我为您制作了一个模拟示例。您需要确保对以下内容使用rowGroup外部脚本/样式表。在rowGroup.startRender函数中，您需要执行以下操作：
创建一个total变量，从要获得total(努力(的行中提取数据，然后使用reduce函数返回一个相加的值。完成此操作后，将其附加到新的表行中。
var totalEfforts = rows
.data()
.pluck('Efforts')
.reduce( function (a, b) {
return a + b;
}, 0);
var data = [
{
"Name" : "Sakthi",
"Project" : "HTML Page",
"Task" : "Designing",
"Efforts" : 2.5
},
{
"Name" : "Sakthi",
"Project" : "HTML Page",
"Task" : "JS",
"Efforts" : 0.5
},
{
"Name" : "Sakthi",
"Project" : "HTML Page",
"Task" : "CSS",
"Efforts" : 5
},
{
"Name" : "Vel",
"Project" : "HTML Page",
"Task" : "Testing",
"Efforts" : 4
},
{
"Name" : "Vel",
"Project" : "HTML Page",
"Task" : "Test Case",
"Efforts" : 4
}
]
$(document).ready(function() {
$('#example').DataTable( {
data: data,
columns : [
{"data" : "Name", visible: false},
{"data" : "Project"},
{"data" : "Task"},
{"data" : "Efforts"}
],
order: [[2, 'asc']],
rowGroup: {
dataSrc: ['Name'],
startRender: function (rows, group){
var totalEfforts = rows
.data()
.pluck('Efforts')
.reduce( function (a, b) {
return a + b;
}, 0);
return $('<tr/>')
.append( '<td colspan="2">'+group+'</td>' )
.append( '<td>'+totalEfforts.toFixed(0)+'</td>' )
.append( '<td/>' );
},
endRender: null,
}
} );
} );<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.4/css/rowGroup.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.4/js/dataTables.rowGroup.min.js"></script>
</head>
<body>
<div class="container">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Project</th>
<th>Task</th>
<th>Efforts (hrs)</th>
</tr>
</thead>
</table>
</div>
</body>
</html>