效果图：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结算明细-按标段分组</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.9.0/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.9.0/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var dataSet = [
["A1标", "光圆钢筋(HPB300) φ6.5", 2700.00, 10.00, 27000.00, 5,''],
["A1标", "光圆钢筋(HPB300) φ8", 2700.00, 10.00, 27000.00, 0,''],
["A1标", "光圆钢筋(HPB300) φ10", 2700.00, 10.00, 27000.00, 0,''],
["A1标", "螺纹钢(HRB400)Φ10", 2755.80, 10.00, 27558.00, 0,''],
//["A1标", "螺纹钢(HRB400)Φ12", 2755.80, 10.00, 27558.00, 0],
["A1标", "小计", 0, 40.00, 108558.00, 0,'group'],
["A2标", "螺纹钢(HRB400)Φ22", 3040.00, 10.00, 30400.00, 6,''],
["A2标", "螺纹钢(HRB400)Φ25", 3040.00, 10.00, 30400.00, 0,''],
["A2标", "螺纹钢(HRB400)Φ28", 3040.00, 10.00, 30400.00, 0,''],
["A2标", "螺纹钢(HRB400)Φ30", 3040.00, 10.00, 30400.00, 0,''],
["A2标", "螺纹钢(HRB400)Φ32", 3060.00, 10.00, 30600.00, 0,''],
["A2标", "小计", 0, 50.00, 152200.00, 0,'group'],
];
$(document).ready(function() {
$('#payment').dataTable({
"aaData": dataSet,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) {
var quantityTotal = 0;
var amountTotal = 0;
for(var i = 0; i < aaData.length; i++) {
if(aaData[i][6] == "group") {
//console.log(aaData[i][1]);
continue;
}
quantityTotal += aaData[i][3] * 1;
amountTotal += aaData[i][4] * 1;
}
//读取小数位配置
var quantityDigits = 2;
var amountDigits = 3
/* Modify the footer row to match what we want */
var nCells = nRow.getElementsByTagName('th');
nCells[3].innerHTML = parseFloat(quantityTotal).toFixed(quantityDigits);
nCells[4].innerHTML = parseFloat(amountTotal).toFixed(amountDigits);
},
"aoColumns": [{
"sName": "BD_Name",
"sClass": "left"
}, {
"sName": "Name",
"sClass": "left",
"fnRender": function(oObj, sVal) {
if(oObj.aData[6] == "group") {
return '<p style="font-weight: bold;">' + sVal + '</p>';
} else {
return sVal;
}
}
}, {
"sName": "Price",
"sClass": "right",
"fnRender": function(oObj, sVal) {
console.log(oObj.aData);
if(oObj.aData[6] == "group") {
//alert("hello");
return '';
} else {
//alert("hehe");
return sVal;
}
}
}, {
"sName": "Quantity",
"sClass": "right",
"fnRender": function(oObj, sVal) {
if(oObj.aData[6] == "group") {
return '<p style="font-weight: bold;">' + sVal + '</p>';
} else {
return sVal;
}
}
}, {
"sName": "Amount",
"sClass": "right",
"fnRender": function(oObj, sVal) {
if(oObj.aData[6] == "group") {
return '<p style="font-weight: bold;">' + sVal + '</p>';
} else {
return sVal;
}
}
}],
"aoColumnDefs": [{
"aTargets": [0],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
var rowspan = oData[5];
//console.log(rowspan);
if(rowspan > 1) {
$(nTd).attr('rowspan', rowspan)
}
if(rowspan == 0) {
$(nTd).remove();
}
}
}]
});
});
</script>
</head>
<body>
<table id="payment" class="display table table-bordered" cellspacing="0" width="600" style="margin-top: 50px">
<thead>
<tr>
<th>标段</th>
<th style=" 300px;">材料名称及规格</th>
<th>结算单价</th>
<th>数量</th>
<th>结算金额</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>
合计:
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</tfoot>
</table>
</body>
</html>
/*
* fnCreatedCell
* 无默认值
* 每当新的单元格被建立（Ajax源等）或者处理输入（DOM源）时，开发者可定义的函数会被调用
* 该属性用作fnRender的补充来允许你修改在fnRender函数调用之后新建的DOM元素（例如增加背景颜色）
*/
按分组插入小计行，并且增加一列用来标识合并单元格。
//获取数据
var data = Service.GetPaymentDetails(paymentId);
var result = new List<IComparable[]>();
//按标段分组
var groups = data.GroupBy(c => c.BDName);
foreach (var g in groups)
{
var items = data.Where(c => c.BDName == g.Key).ToList();
var first = true;
foreach (var i in items)
{
result.Add(new IComparable[]
{
i.BDName,
i.RawMaterialName,
i.Quantity.ToQStr(),
i.Price.ToPStr(),
i.Amount.ToAStr(),
first?items.Count + 1:0, //第一行数据插入要合并单元格的行数
""
});
first = false;
}
//插入分组小计行
var sub = new IComparable[]
{
g.Key,
"小计",
g.Sum(x=>x.Quantity).ToQStr(),
"",
g.Sum(x=>x.Amount).ToAStr(),
0,
"group"
};
result.Add(sub);
}
//返回
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = data.TotalItemCount,
iTotalDisplayRecords = data.TotalItemCount,
aaData = result
}, JsonRequestBehavior.AllowGet);