使用数据表的Sharepoint列表中的RowGrouping和SubTotals

Question

您好我正在使用我使用DataTables显示的Sharepoint列表，我提到了一篇文章而我是要进行分组，但我无法获得Group Totals，RowGrouping and Subtotal on Datatable

在我正在分组的这个字段中是一个名为Heirarch的计算字段，例如字段值通常类似于Capital.Establishment它是两个字段的串联

以下是我的代码

<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- DataTables CSS -->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css"/>
<!-- DataTables -->

<script type="text/javascript" src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<script type="text/javascript" src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>

<style type="text/css">
    tr.group, tr.group:hover {
    background-color: #ddd !important;
}
.pocell {
    font-weight:bold;
}
</style>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>

    </tr>
  </thead>


</table>

<script type="text/javascript">


$(document).ready(function() {

        var call = $.ajax({

            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Demo%20Custom%20List')/items?$select=Hierarch,Title,Year2015,Year2016,Year2017,Year2018,Year2019,Exp_x0020_Total",

            type: "GET",

            dataType: "json",

            headers: {

                Accept: "application/json;odata=verbose"

            }


        });

        call.done(function (data,textStatus, jqXHR){
var marker;

var table = $('#example').DataTable({
    "aaData": data.d.results,
    "columns": [
        {
            "title": "Hierarchy",
            "mData": "Hierarch",
            "visible": false


        }, {
            "title": "Title",
            "mData": "Title"
        }, {
            "title": "Year2015",
            "mData": "Year2015",
            "sortable": false
        }, {
            "title": "Year2016",
            "mData": "Year2016",
            "sortable": false
        }, {
            "title": "Year2017",
            "mData": "Year2017",
            "sortable": false
        }, {
            "title": "Year2018",
            "mData": "Year2018",
            "sortable": false
        }, {
            "title": "Year2019",
            "mData": "Year2019",
            "sortable": false
        }, {
            "title": "Total Expense",
            "mData": "Exp_x0020_Total",
            "sortable": false
        }
    ],
    "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": 1,
                    "class": "pocell",
                    "text": "Hierarch # " + group.split('_').join('.')
                })).append($("<td></td>", {
                    "id": "e" + group,
                    "class": "noCount",
                    "text": "60.00"
                })).append($("<td></td>", {
                    "id": "f" + group,
                    "class": "noCount",
                    "text": "60.00"
                })).append($("<td></td>", {
                    "id": "g" + group,
                    "class": "noCount",
                    "text": "50.00"
                })).append($("<td></td>", {
                    "id": "h" + group,
                    "class": "noCount",
                    "text": "40.00"
                })).append($("<td></td>", {
                    "id": "i" + group,
                    "class": "noCount",
                    "text": "30.00"
                })).append($("<td></td>", {
                    "id": "j" + group,
                    "class": "noCount",
                    "text": "20.00"
                })).prop('outerHTML'));
                last = group;
            }

            val = api.row(api.row($(rows).eq(i)).index()).data();



            $("#e" + val.Hierarch.split('.').join('_')).text(parseFloat($("#e" + val.Hierarch.split('.').join('_')).text()) + parseFloat(val.Year2015));
         //   $("#e" + val.Hierarch).text(parseFloat($("#e" + val.Hierarch).text()) + val.Year2015);
            $("#f" + val.Hierarch).text(parseFloat($("#f" + val.Hierarch).text()) + val.Year2015);
            $("#g" + val.Hierarch).text(parseFloat($("#g" + val.Hierarch).text()) + val.Year2015);
            $("#h" + val.Hierarch).text(parseFloat($("#h" + val.Hierarch).text()) + val.Year2015);
            $("#i" + val.Hierarch).text(parseFloat($("#i" + val.Hierarch).text()) + val.Year2015);
            $("#j" + val.Hierarch).text(parseFloat($("#j" + val.Hierarch).text()) + val.Year2015);
        });
    }
});
});

        call.fail(function (jqXHR,textStatus,errorThrown){

                alert("Error retrieving Tasks: " + jqXHR.responseText);

        });

} );

</script>