DataTables实现按分组小计
效果图：
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="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实现按分组小计的更多相关文章
- orcl rollup 分组小计、合计
表数据: select * from group_test; 分组小计.合计: select group_id, decode(concat(job, group_id), null, '合计', g ...
- PB gird类型数据窗口 设置分组、分组小计、合计
今天遇到一个需求,gird表格数据如下: 部门 类型 数据 A 类型1 1 A 类型2 2 B 类型1 3 B 类型2 4 合计 10 实际需要显示的结果为: 部门 ...
- Oracle分组小计、总计示例(grouping sets的使用)
1.首先创建一个表 create table TE ( ID VARCHAR2(2), T_CODE VARCHAR2(4), T_NAME VARCHAR2(4), T_A ...
- 实现对数据进行分组小计并计算合计的实例 asp.net
可以通过数据绑定来实现 通过union all 来实现数据库 SELECT * FROM v3_pay_list2 where ( (ought_date >= '2012-12-06') a ...
- SQLSERVER 使用 ROLLUP 汇总数据，实现分组统计，总计（合计），小计
版权声明:本文为博主原创文章,未经博主允许不得转载.本人观点或有不当之处,请在评论中及时指正,我会在第一时间内修改. https://blog.csdn.net/aiming66/article/de ...
- SQLSERVER 使用 ROLLUP 汇总数据，实现分组统计，合计，小计
表结构: CREATE TABLE [dbo].[Students]( ,) NOT NULL, ) NULL, [Sex] [int] NOT NULL, ) NULL, ) NULL, , ) N ...
- 每日学习心得：SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）
2013-8-20 1. SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...
- 用SQL实现统计报表中的"小计"与"合计"的方法详解
本篇文章是对使用SQL实现统计报表中的"小计"与"合计"的方法进行了详细的分析介绍,需要的朋友参考下 客户提出需求,针对某一列分组加上小计,合计汇总.网上找 ...
- SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）
SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 2013-8-20 1. SQL查询表的行列转换/小计/统计(with rollup,with ...
随机推荐
- Fluentd直接传输日志给Elasticsearch
官方文档地址:https://docs.fluentd.org/output/elasticsearch td-agent的v3.0.1版本以后自带包含out_elasticsearch插件,不用再安 ...
- OFD是什么
OFD是什么? 原文链接:OFD是什么 OFD更多了解:OFD (Open Fixed layout Document/开放版式文档) OFD格式文件介绍 OFD(Open Fixed layout ...
- [CG从零开始] 6. 加载一个柴犬模型学习UV贴图
在第 5 篇文章中,我们成功加载了 fbx 模型,并且做了 MVP 变换,将立方体按照透视投影渲染了出来.但是当时只是随机给顶点颜色,并且默认 fbx 文件里只有一个 mesh,这次我们来加载一个柴犬 ...
- SpringBoot+MyBatis Plus对Map中Date格式转换的处理
在 SpringBoot 项目中, 如何统一 JSON 格式化中的日期格式 问题 现在的关系型数据库例如PostgreSQL/MySQL, 都已经对 JSON 类型提供相当丰富的功能, 项目中对于不需 ...
- Podman容器基础（二）
Podman容器技术基础(二) 目录 Podman容器技术基础(二) 容器的使用 用户操作 用户配置文件 容器卷 容器的使用 运行一个容器 [root@cent1 ~]# podman pull ht ...
- 动态代理(JDK、CGLIB)
JDK-Proxy(动态代理): 特点:要求被代理的对象必须接口 缺点:如果一个对象没有任何接口实现,则不能使用JDK动态代理 1.创建一个Animal 提供一个方法 2.创建一个cat类.实现Ain ...
- Rdt2.1 和 Rdt2.2的详细解释
Rdt2.1 和 Rdt2.2的详细解释 目录 Rdt2.1 和 Rdt2.2的详细解释 这俩为啥会出现? 解决之道 Rdt 2.1 Rdt2.2 可靠数据传递中Rdt1.0, Rdt2.0, Rdt ...
- HTTP缺点有哪些，如何解决
前言 大家好,我是蜗牛,在上一篇中,我们介绍了不同版本的HTTP区别和发展背景,这篇文章我们来聊聊HTTP的缺点,HTTP缺点大致总结有以下三点: 通信使用明文(不加密),内容可能会被窃听. 不验证通 ...
- 分享个好东西 - 两行前端代码搞定bilibili链接转视频
只需要在您的要解析B站视频的页面的</body>前面加上下面两行代码即可,脚本会在客户端浏览器里解析container所匹配到的容器里的B站超链接 (如果不是外围有a标签的超链接只是纯粹的 ...
- 三、redis环境安装
三.redis环境安装 3.1.下载和安装 下载地址:https://github.com/tporadowski/redis/releases 使用以下命令启动redis服务端 redis-se ...