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 ...
随机推荐
- Java实现6种常见排序
1.冒泡排序(Bubble Sort) 第0轮 3 1 4 1 5 9 2 6 5 3 5 8 9 第1轮 1 3 1 4 5 2 6 5 3 5 8 9 9 第2轮 1 1 3 4 2 5 5 3 ...
- 分布式存储系统之Ceph集群存储池操作
前文我们了解了ceph的存储池.PG.CRUSH.客户端IO的简要工作过程.Ceph客户端计算PG_ID的步骤的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-187 ...
- 关于docker创建容器报错-docker: Error response from daemon: runtime "io.containerd.runc.v2" binary not installed
今天在对一台服务器(docker相关的业务服务器)进行OS补丁时,默认使用的 yum update -y 对所有的安装包进行了升级 升级完成后,让应用方检查确认应用及功能是否一切正常,如果不正常,严重 ...
- 关于Redhat-7.x-下docker的安装记录
今天因公司项目,需要部署docker环境,能根据指定的镜像创建容器 于是首先就得先部署docker环境,过程记录如下: 在Redhat 7.x - (aws上的Redhat) 环境下部署过程 1.安装 ...
- python基础作业2
目录 编写一个用户认证装饰器 利用有参装饰器编写多种用户登录校验策略 利用递归函数依次打印列表中每一个数据值 获取用户权限并校验用户登录 编写一个用户认证装饰器 """ ...
- 开源动态可监控线程池DynamicTp介绍
前言 使用线程池 ThreadPoolExecutor 过程中你是否有以下痛点呢? 代码中创建了一个 ThreadPoolExecutor,但是不知道那几个核心参数设置多少比较合适 凭经验设置参数值, ...
- PHP配置负载均衡
我项目是用宝塔面板.所以这次用宝塔面板演示. 环境: LNMP 代码:2套.2套代码除了配置其他都是一样 域名:1个.2级域名.其实一级二级都没关系 /************************ ...
- Dubbo-聊聊注册中心的设计
前言 Dubbo源码阅读分享系列文章,欢迎大家关注点赞 SPI实现部分 Dubbo-SPI机制 Dubbo-Adaptive实现原理 Dubbo-Activate实现原理 Dubbo SPI-Wrap ...
- AI之强化学习、无监督学习、半监督学习和对抗学习
1.强化学习 @ 目录 1.强化学习 1.1 强化学习原理 1.2 强化学习与监督学习 2.无监督学习 3.半监督学习 4.对抗学习 强化学习(英语:Reinforcement Learning,简称 ...
- 5.httprunner-hook机制
hook简介 httprunner3是基于python的pytest框架,里面也有前置和后置的概念 setup_hooks:开始执行前触发hook函数,主要用于请求预处理(签名,加密等) teardo ...