效果图：

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. C++自学笔记 Composition:对象组合

    继承是实现软件重用的一种方式. 在C++中拥有另一种实现软件重用的方式----- Composition:对象组合 用已经有的对象制造新的对象 (设计一个类的时候它的成员变量可以是另一个类的对象) 对 ...

  2. PAT (Basic Level) Practice 1002 写出这个数 分数 20

    读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 10100. 输出格式: 在一行内输出 ...

  3. 为什么同行业，同个软件，有些 ERP 成功，有的失败了？

    企业的差异性是各类系统部署必须正视的关键问题!同行业,同个软件,有些 ERP 成功,有的失败,基本上是企业差异性没有得到重视的,所以一点也不应该感到奇怪.规模不同.行业不同.发展阶段不同.生产模式不同 ...

  4. Java程序设计（四）作业

    要求:定义一个Java项目,项目名为"学号_姓名_题号",如:"20181101_张三_1",完成后将项目复制到桌面并压缩提交到邮箱82794085@qq.co ...

  5. The XOR Largest Pair （trie树）

    题目描述 在给定的 NN 个整数 A_1,A_2,--,A_NA1​,A2​,--,AN​ 中选出两个进行xor运算,得到的结果最大是多少?xor表示二进制的异或(^)运算符号. 输入格式 第一行输入 ...

  6. POJ1655 Balancing Act （树的重心）

    求树的重心的模板题,size[u]维护以u为根的子树大小,f[u]表示去掉u后的最大子树. 1 #include<cstdio> 2 #include<iostream> 3 ...

  7. C++ 高级数据类型（六）—— 自定义数据类型

    转载:https://blog.csdn.net/zjy900507/article/details/79623829 定义自己的数据类型 (typedef) C++ 允许我们在现有数据类型的基础上定 ...

  8. 4.ElasticSearch系列之基本概念

    1. 文档 ElasticSearch是面向文档的,文档是所有可搜索数据的最小单位 文档会被序列化成JSON格式,保存在ES中 每个文档都有一个unique ID #查看前10条文档,了解文档格式 P ...

  9. python基础之open函数和路径处理

    前言 本次内容主要介绍文件处理open函数以及路径处理. 一.open函数 根据前面介绍的函数调用方式,调用open函数. #open函数调用 open() TypeError: open() mis ...

  10. 什么是CLR？

    CLR翻译为"公共语言运行库",全称是Common Language Runtime,它是一个可以由多种语言使用的"运行时",CLR的核心功能如内存管理,程序集 ...