效果图：

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实现按分组小计的更多相关文章

  1. orcl rollup 分组小计、合计

    表数据: select * from group_test; 分组小计.合计: select group_id, decode(concat(job, group_id), null, '合计', g ...

  2. PB gird类型数据窗口 设置分组、分组小计、合计

    今天遇到一个需求,gird表格数据如下:  部门  类型 数据   A  类型1  1  A  类型2  2  B  类型1  3  B  类型2  4   合计 10 实际需要显示的结果为:  部门 ...

  3. Oracle分组小计、总计示例(grouping sets的使用)

    1.首先创建一个表 create table TE ( ID        VARCHAR2(2), T_CODE    VARCHAR2(4), T_NAME    VARCHAR2(4), T_A ...

  4. 实现对数据进行分组小计并计算合计的实例 asp.net

    可以通过数据绑定来实现  通过union all 来实现数据库 SELECT * FROM v3_pay_list2 where ( (ought_date >= '2012-12-06') a ...

  5. SQLSERVER 使用 ROLLUP 汇总数据，实现分组统计，总计（合计），小计

    版权声明:本文为博主原创文章,未经博主允许不得转载.本人观点或有不当之处,请在评论中及时指正,我会在第一时间内修改. https://blog.csdn.net/aiming66/article/de ...

  6. SQLSERVER 使用 ROLLUP 汇总数据，实现分组统计，合计，小计

    表结构: CREATE TABLE [dbo].[Students]( ,) NOT NULL, ) NULL, [Sex] [int] NOT NULL, ) NULL, ) NULL, , ) N ...

  7. 每日学习心得：SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）

    2013-8-20 1.    SQL查询表的行列转换/小计/统计(with  rollup,with cube,pivot解析) 在实际的项目开发中有很多项目都会有报表模块,今天就通过一个小的SQL ...

  8. 用SQL实现统计报表中的"小计"与"合计"的方法详解

    本篇文章是对使用SQL实现统计报表中的"小计"与"合计"的方法进行了详细的分析介绍,需要的朋友参考下   客户提出需求,针对某一列分组加上小计,合计汇总.网上找 ...

  9. SQL查询表的行列转换/小计/统计（with rollup，with cube，pivot解析）

    SQL查询表的行列转换/小计/统计(with rollup,with cube,pivot解析) 2013-8-20 1.    SQL查询表的行列转换/小计/统计(with  rollup,with ...

随机推荐

  1. 《Thinking In Java》作者：不要使用并发！

    前言 今天纯粹就是带你们来读读书的~ 最近除了工作,特地买回了自己很喜欢的作者新发售的一本书<On Java>,作者是我的老朋友布鲁斯·埃克尔,在Java领域很有名,你可能没听过他的名字, ...

  2. CSS基础-关于CSS注释的添加

    在 CSS 中增加注释很简单,所有被放在/*和*/分隔符之间的文本信息都被称为注释. CSS 只有一种注释,不管是多行注释还是单行注释,都必须以/*开始.以*/结束,中间加入注释内容. 1.注释放在样 ...

  3. Bug改不完，迭代总延期，咋办？

    摘要:本文从流程上需要改进的地方进行讨论,分四个方面来分析产生这个问题的原因. 本文分享自华为云社区<Bug改不完,迭代总延期,咋办?>,作者: 华为云PaaS服务小智. 前言 随着互联网 ...

  4. 跟我学Python图像处理丨图像特效处理：毛玻璃、浮雕和油漆特效

    摘要:本文讲解常见的图像特效处理,从而让读者实现各种各样的图像特殊效果,并通过Python和OpenCV实现. 本文分享自华为云社区<[Python图像处理] 二十四.图像特效处理之毛玻璃.浮雕 ...

  5. 测试开发jmeter forEach控制器

    测试开发jmeter forEach控制器 forEach控制器的使用场景:主要是对大量数据轮询就行接口请求 forEach控制器的使用前提:将数据进行参数化 测试开发jmeter forEach控制 ...

  6. GNN 101

    GNN 101 姚伟峰 http://www.cnblogs.com/Matrix_Yao/ GNN 101 Why Graph无处不在 Graph Intelligence helps It's t ...

  7. Azure DevOps Server 设置项目管理用户，用户组

    一,引言 Azure DevOps Server 搭建完成后,关于如何进行项目管理,项目成员管理等,我们接着上一篇文章,继续讲解 Azure DevOps Server 的用户,用户组.首先,我们需要 ...

  8. 【云原生 · Kubernetes】配置 Rancher docker 云平台

    个人名片: 因为云计算成为了监控工程师‍ 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying 1.1 Rancher 概述 Rancher 是一个开源的企业级容器管理平台.通过 Ranc ...

  9. Redis集群研究和实践（基于redis 3.2.5）（一）

    前言 Redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到广泛的使 用. Redis在2015年发布了3.0.0,官方支持了redis cluster.至此结束了redis ...

  10. 【Java 并发003】原理层面：Java并发三特性全解析

    一.前言 不管什么语言,并发的编程都是在高级的部分,因为并发的涉及的知识太广,不单单是操作系统的知识,还有计算机的组成的知识等等.说到底,这些年硬件的不断的发展,但是一直有一个核心的矛盾在:CPU.内 ...