效果图：

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. secureCRT登录ubuntu 报错：`No compatible key-exchange method. The server supports these methods: diffie-hellman`

    在VMware虚拟机中安装好ubuntu 20.04,已安装并启动sshd,但是使用secureCRT远程登录时则报错: Key exchange failed. No compatible key- ...

  2. 工厂有了 ERP 系统，为什么还要上 MES 系统？

    工厂可以没有ERP,但如果要用系统,必定是MES系统!所以即使工厂有了ERP,也还是要上MES系统的.产生这样的疑问很重要的一个原因是没有明确ERP与MES到底是啥.ERP是Enterprise Re ...

  3. 关于vmware虚拟机的ova/ovf转换成aws上的AMI镜像

    很多时候,我们会有这样的需求,需要将DC中vmware虚拟化的服务器,迁移到aws上,我们就得先将vmware虚拟机导出,然后转换 关于vmvare虚拟的导出备份,一般有ova(Open Virtua ...

  4. P5657 [CSP-S2019] 格雷码 （找规律）

    观察几个数据,有一种思路:类似于二分,判断每一位应该填1还是0: 1 #include <bits/stdc++.h> 2 //#define loveGsy 3 using namesp ...

  5. linux 安装/卸载go环境

    linux 安装/卸载go环境(基于centos8) 安装 下载go的安装包 Golang官网下载地址:https://golang.org/dl/ 将安装包解压放到到usr/local中,并解压 c ...

  6. 微信小程序专题（一）-----微信后台的相关开发

    本人最近在做微信小程序后端的相关开发工作 接触到微信小程序目前来讲需要两个条件 1.前端通过后台服务器去调用微信平台接口,来获取openid: 2.前端必须调用https 跟域名的形式 不得出现ip加 ...

  7. 魔改editormd组件，优化ToC渲染效果

    前言 我的StarBlog博客目前使用 editor.md 组件在前端渲染markdown文章,但这个组件自动生成的ToC(内容目录)不是很美观,我之前魔改过一个树形组件 BootStrap-Tree ...

  8. faker

    faker是一个生成伪造数据的Python第三方库,可以伪造城市,姓名,文班等各自信息,而且支持中文   安装 pip3 install faker   使用 # 导包 from faker impo ...

  9. 文本挖掘与NLP笔记——代码向：分词

    分词:jieba.cut words = jieba.cut("我来到北京大学",cut_all=True) print('全模式:'+'/'.join([w for w in w ...

  10. 51单片机-独立按键控制led矩阵的左移和右移

    51单片机学习 独立按键 控制led灯光矩阵的左移和右移 开发板采用的是普中的A2学习开发板,具体的代码如下: typedef unsigned int u16; void delay(u16 tim ...