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 ...
随机推荐
- HM VNISEdit2.0.3修正版
HM VNISEdit,曾经是NSIS最强最佳开源免费编辑器/IDE,但2003年至今原作者已经接近20年未再更新,随着NSIS3.X版本的普及,NIS Edit不可避免的出现了大大小小的各种BUG, ...
- Go中的闭包、递归
一 闭包详解 闭包的应该都听过,但到底什么是闭包呢? 闭包是由函数及其相关引用环境组合而成的实体(即:闭包=函数+引用环境). "官方"的解释是:所谓"闭包", ...
- Windows Socket 接口简介
Windows Socket接口是Windows下网络编程的接口,在介绍Windows Socket接口之前,首先要简单介绍一下TCP/IP协议和描述网络系统架构的 OSI模型,以及TCP/IP模型 ...
- 齐博X1到底是个什么鬼？
什么是齐博/齐博CMS之X1? 齐博X1是齐博软件基于thinkphp5开发的内容管理系统,拓展性非常强,后台一键升级,后台提供丰富的频道模块云市插件市场.风格市场.钩子市场,所有都是一键在线安装. ...
- 7_vue的数据代理，双向绑定
回顾 object.defineProperty() 方法 区别 defineProperty == 给对象定义属性用的 需要传递三个基本参数 需要定义属性的对象名 你要定义的属性叫什么名字(比如给p ...
- Silky微服务框架之服务引擎
构建服务引擎 在注册Silky微服务应用一节中,我们了解到在ConfigureServices阶段,通过IServiceCollection的扩展方法AddSilkyServices<T> ...
- 6.channels 配置websocket
Django默认不支持websockey,需要Django支持的话需要安装第三方组件 django channels 是django支持websocket的一个模块. 1.安装 pip3 in ...
- 深度学习环境搭建常用网址、conda/pip命令行整理（pytorch、paddlepaddle等环境搭建）
前言:最近研究深度学习,安装了好多环境,记录一下,方便后续查阅. 1. Anaconda软件安装 1.1 Anaconda Anaconda是一个用于科学计算的Python发行版,支持Linux.Ma ...
- [苹果APP上架]ios App Store上架详细教程-一条龙顺滑上架-适合小白
如何在 2022 年将您的应用提交到 App Store 您正在启动您的第一个应用程序,或者距离上次已经有一段时间了.作者纸飞机@cheng716051来给你讲讲将应用程序提交到 App Store ...
- [AGC057D] Sum Avoidance
Link 本篇题解大部分内容来自这篇文章 首先题意翻译: 给定一个正整数 \(S\) ,称一个正整数集合 \(A\) 是好的,当且仅当它满足以下条件: \(A\) 中元素在 \((0,S)\) 之间 ...