效果图：

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. Centos7安装redash

    一.更改yum国内源: (1)cd /etc/yum.repos.d/ sudo yum install wget (2)备份:sudo mv /etc/yum.repos.d/CentOS-Base ...

  2. （Bug修复）C#爬虫，让你不再觉得神秘

    Bug修复 https://github.com/ZhangQueque/quewaner.Crawler/issues/1 修复加载Https网址中午乱码,导致Node解析失败的问题 1.使用第三方 ...

  3. 移动端touch拖动事件和click事件冲突问题解决

    通过一个悬浮球交互功能的案例来阐述问题,以及解决办法. 实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘 点击悬浮球,可以跳转界面,或者更改悬浮球的形态 准 ...

  4. aardio + PowerShell 可视化快速开发独立 EXE 桌面程序

    aardio 可以方便地调用 PowerShell ,PowerShell 中也可以自由调用 aardio 对象与函数.不用带上体积很大的System.Management.Automation.dl ...

  5. Dapr 长程测试和混沌测试

    介绍 这是Dapr的特色项目,具体参见: https://github.com/dapr/test-infra/issues/11 ,在全天候运行的应用程序中保持Dapr可靠性至关重要.在部署真正的应 ...

  6. Codeforces Round #577 (Div. 2) C. Maximum Median

    题意:就是给一n(奇数)个元素数组,可以对它的元素执行k次+1操作,递增排序,求中位数最大是多少. 那我们在排完序之后,中位数前的元素可以不管它,只要对中位数后的操作就行,我们要判断和中位数相等的元素 ...

  7. Java开发学习(三十七)----SpringBoot多环境配置及配置文件分类

    一.多环境配置 在工作中,对于开发环境.测试环境.生产环境的配置肯定都不相同,比如我们开发阶段会在自己的电脑上安装 mysql ,连接自己电脑上的 mysql 即可,但是项目开发完毕后要上线就需要该配 ...

  8. Filter 筛选器（二）之 ExceptionFilter

    public class MyExceptionFilter : IAsyncExceptionFilter { private readonly ILogger<MyExceptionFilt ...

  9. uoj316【NOI2017】泳池

    题目链接 \(S=k\)可以拆成\(S\le k\)减去\(S\le k-1\).用\((i,j)\)表示第i行第j列. 设\(g(i,j)\)表示前i行前j列都安全其他未知满足条件的概率,\(h(i ...

  10. golang中的选项模式

    索引 https://waterflow.link/articles/1663835071801 当我在使用go-zero时,我看到了好多像下面这样的代码: ... type ( // RunOpti ...