效果图：

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. 使用 Windows 包管理器 (winget) 安装 .Net

    用户可以在 Windows 10 和 Windows 11 计算机上使用 winget 命令行工具来发现.安装.升级.删除和配置应用程序. 此工具是 Windows 程序包管理器服务的客户端接口. 以 ...

  2. Java线程同步的四种方式详解(建议收藏)

    ​ Java线程同步属于Java多线程与并发编程的核心点,需要重点掌握,下面我就来详解Java线程同步的4种主要的实现方式@mikechen 目录 什么是线程同步 线程同步的几种方式 1.使用sync ...

  3. Netty 学习（八）：新连接接入源码说明

    Netty 学习(八):新连接接入源码说明 作者: Grey 原文地址: 博客园:Netty 学习(八):新连接接入源码说明 CSDN:Netty 学习(八):新连接接入源码说明 新连接的接入分为3个 ...

  4. PHP全栈开发（四）: HTML 学习（2. div 布局）

    无序列表,有序列表,自定义列表 无序列表是ul表示,每个元素用li表示 有序列表是ol表示,每个元素用li表示 <ul> <li>首页</li><li> ...

  5. Springboot 之 Filter 实现 Gzip 压缩超大 json 对象

    简介 在项目中,存在传递超大 json 数据的场景.直接传输超大 json 数据的话,有以下两个弊端 占用网络带宽,而有些云产品就是按照带宽来计费的,间接浪费了钱 传输数据大导致网络传输耗时较长 为了 ...

  6. 220722 T1 分树 （模拟）

    dfs一遍求出以每个节点为根的子树大小,然后枚举n的约数,对于每个约数i,统计sz[ ]是i的倍数的有多少个(开桶统计),如果有n/i个则答案+1. 这道题也就是个结论题,画图分析一下.复杂度O(n* ...

  7. 《吐血整理》高级系列教程-吃透Fiddler抓包教程(28)-Fiddler如何抓取Android7.0以上的Https包-下篇

    1.简介 虽然依旧能抓到大部分Android APP的HTTP/HTTPS包,但是别高兴的太早,有的APP为了防抓包,还做了很多操作:① 二次加密有的APP,在涉及到关键数据通信时,会将正文二次加密后 ...

  8. 前端无法渲染CSS文件

    问题描述: 启动前端后,发现前端的页面渲染不符合预期,看情况应该是css文件没有生效. 排查步骤: 查看有无报错信息. 查看后台输出,没有可用的提示信息,如图: 确认 css 的路径没错. 前端打包后 ...

  9. 基于数组或链表的学生信息管理系统(小学期C语言程序实训)

    1.基于数组的学生信息管理系统 实验内容: 编写并调试程序,实现学校各专业班级学生信息的管理.定义学生信息的结构体类型,包括:学号.姓名.专业.班级.3门成绩. 实验要求: (1) main函数:以菜 ...

  10. LcdTools如何通过PX01把EDP屏的EDID拷贝出来

    PX01点EDP屏在上电过程会自动读取屏EDID,怎么把EDP EDID值拷贝出来呢? 在上电时序函数调用SetEdidRdShowEn(ON)指令开启EDID值读取显示功能.如下图 通过上述操作开机 ...