javascript - 多个组的 jQuery 数据表总和/小计

Question

我有一个包含 2 组行的数据表，我想要一列的总和/小计，例如，每个分组行的年龄(我知道这没有意义；))。

这是一个JSFiddle .

        $(document).ready(function() {
        var table = $('#example').DataTable({
    "ordering": false,
    "columnDefs": [
                { "visible": false, "targets": [2, 1] }
            ],
            "drawCallback": function(settings) {
                var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;
                    var columns = [2,1];

                    for (c = 0; c < columns.length; c++) {
                        var colNo = columns[c];
                        api.column(colNo, { page: 'current' }).data().each(function (group, i) {
                            if (last !== group) {
                                $(rows).eq(i).before(
                                    '<tr class="group"><td colspan="4"><h4 style="font-weight: bold !important;">' + group + '</h4></td></tr>'
                                );
                                last = group;
                            }
                        });
                    }
            },
        });
    });

Answer 1

您可以添加 "footerCallback" function在你的 .DataTable({}) 里面

 "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;
        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };
        // Total over all pages
        total = api
            .column( 3 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
      // Total over this page
        pageTotal = api
            .column( 3, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
        // Update footer
        $( api.column( 3 ).footer() ).html(
            'Total age:'+pageTotal +' ( '+ total +' total)'
        );
      },

我上传了你的jsfiddle

您可以更改“column( 3 )”的数量以更改您想要求和的列。

希望这会有所帮助:)