数据表行分组小计答案

【问题标题】：DataTables Row Grouping Subtotals数据表行分组小计
【发布时间】：2015-07-30 22:22:50
【问题描述】：

当我的字段有空格时，例如。名字姓氏，我不能求和。另外，我如何对列 [0] 进行 number_format 总计？我在这里找到的这个例子： RowGrouping and Subtotal on Datatable

https://jsfiddle.net/annoyingmouse/6c3wzwcd/

我想要

 "drawCallback": function (settings) {
    var api = this.api();
    var rows = api.rows({
        page: 'current'
    }).nodes();
    var last = null;
    api.column(0, {
        page: 'current'
    }).data().each(function (group, i) {
        if (last !== group) {
            $(rows).eq(i).before(
            $("<tr></tr>", {
                "class": "group",
                "data-id": group
            }).append($("<td></td>", {
                "colspan": 5,
                "class": "pocell",
                "text": "PO # " + group
            })).append($("<td></td>", {
                "id": "e" + group,
                "class": "noCount",
                "text": "0.00"
            })).append($("<td></td>", {
                "id": "p" + group,
                "class": "noCount",
                "text": "0.00"
            })).append($("<td></td>", {
                "id": "b" + group,
                "class": "noCount",
                "text": "0.00"
            })).prop('outerHTML'));
            last = group;
        }
        val = api.row(api.row($(rows).eq(i)).index()).data();
        $("#e" + val.PO_Nbr).text(parseFloat($("#e" + val.PO_Nbr).text()) + parseFloat(val.Encum_Amt));
        $("#p" + val.PO_Nbr).text(parseFloat($("#p" + val.PO_Nbr).text()) + parseFloat(val.Paid));
        $("#b" + val.PO_Nbr).text(parseFloat($("#b" + val.PO_Nbr).text()) + parseFloat(val.Balance));
    });
},

【问题讨论】：

标签： jquery datatables

【解决方案1】：

这是因为创建总计的代码部分使用了一个 ID，而您的 ID 有一个空格，因此会打嗝。

这应该适用于您的情况：

"drawCallback": function (settings) {
    var api = this.api();
    var rows = api.rows({
        page: 'current'
    }).nodes();
    var last = null;
    api.column(0, {
        page: 'current'
    }).data().each(function (group, i) {
        group = group.split(' ').join('_')
        if (last !== group) {
            $(rows).eq(i).before(
                $("<tr></tr>", {
                    "class": "group",
                    "data-id": group
                }).append($("<td></td>", {
                    "colspan": 5,
                    "class": "pocell",
                    "text": "PO # " + group.split('_').join(' ')
                })).append($("<td></td>", {
                    "id": "e" + group,
                    "class": "noCount",
                    "text": "0.00"
                })).append($("<td></td>", {
                    "id": "p" + group,
                    "class": "noCount",
                    "text": "0.00"
                })).append($("<td></td>", {
                    "id": "b" + group,
                    "class": "noCount",
                    "text": "0.00"
                })).prop('outerHTML'));
            last = group;
        }
        val = api.row(api.row($(rows).eq(i)).index()).data();
        console.log(val);
        $("#e" + val.PO_Nbr.split(' ').join('_')).text(parseFloat($("#e" + val.PO_Nbr.split(' ').join('_')).text()) + parseFloat(val.Encum_Amt));
        $("#p" + val.PO_Nbr.split(' ').join('_')).text(parseFloat($("#p" + val.PO_Nbr.split(' ').join('_')).text()) + parseFloat(val.Paid));
        $("#b" + val.PO_Nbr.split(' ').join('_')).text(parseFloat($("#b" + val.PO_Nbr.split(' ').join('_')).text()) + parseFloat(val.Balance));
    });
}

如果从 ID 中删除空格并在没有空格的组上进行比较，则它应该作为 you expect 工作。

【讨论】：

谢谢！使用->getFormatter的情况呢var val = function ( a ) { return typeof a === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof a === 'number' ? a : 0; };怎么去掉格式--------var val = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; };
在我发布的示例中，我将空格替换为下划线。这意味着在输出名称时，我们可以用空格替换下划线以使其易于阅读。但这并不重要。我确实想到了在初始示例的行上使用数据属性data-id，然后搜索具有正确类的单元格，但考虑得更好。也许这更适合您的情况？