Question

我正在使用jQuery DataTables，我正在尝试构建数据报告。

我能够使用footerCallback在页脚中找到列总计的解决方案，但我无法找到解决方案来获取每行末尾的总计。

经过相当多的研究和试验以及错误之后，我想出了一些使用rowCallback的代码，但是，这似乎并不高效。

以下是我的dataTable中的部分。

"rowCallback": function( row, data, index ) {
    var tr = jQuery(row);
    var d = tr.children(".sum");
    var a= [];
    var c = jQuery.each(d, function(i,v){
        a.push(v.innerText);
    });
    sum = a.reduce(function(a, b) {
        var x = parseFloat(a) || 0;
        var y = parseFloat(b) || 0;
        return x + y;
    }, 0);

    jQuery('td:eq(4)', row).html( sum );
},

需要包含在总和中的单元格（td）具有一类和。就像我说的那样，这很有效，但是，必须有更好的方法来做到这一点。

Answer 1

我同意Gyrocode，但这是我的解决方案，它总结了行和列。

                var mydt = [{ a: 1, b: 2, c: 3, d: 4 }, { a: 5, b: 6, c: 7, d: 8 }, { a: 10, b: 12, c: 13, d: 14 }];

                $(function ($) {
                    //  $("#tbl").DataTable({ columns: [{ data: "id" }, { data: "text" }], dom: "tB", buttons: [{ text: "Load Me", action: function (e, dt, node, config) { loadme(e, dt, node, config); } }] });

                    $("#tbl2").DataTable({
                        data: mydt, columns: [{ data: "a" }, { data: "b" }, { data: "c" }, { data: "d" },
                            {
                                data: function (xx, yy, zz, dd) {
                                    var rt = 0;
                                    $.each(xx, function (item, val) { rt += val; });
                                    return rt;
                                }
                            }],
                        initComplete: function (aaa, bbb, ccc) {
                            var th = $("#tbl2 tfoot th");
                            for (var i = 0; i < 5; ++i) {
                                var sb = 0;
                                var col = $("#tbl2").DataTable().columns(i).data();
                                for (var j = 0; j < col[0].length; ++j) {
                                    sb += col[0][j];
                                }
                                th[i].innerText = sb;
                            }

                        }
                    }

                    );

                }
                );


           <div style="width:500px">
                <table class="display" id="tbl2">
                    <thead>
                        <tr>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>t</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                    <th>0</th>
                    <th>0</th>
                    <th>0</th>
                    <th>0</th>
                    <th>0</th>
                    </tr>
                    </tfoot>
                </table>
            </div>

显示每行的总计

1 个答案: