DataTables实现按分组小计
效果圖：
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>結算明細-按標段分組</title>
<link rel="stylesheet" />
<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="width: 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);
總結
以上是生活随笔為你收集整理的DataTables实现按分组小计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 005_awk案例实战
- 下一篇： 暴风影音16 v9.05.1202.11