Javascript 使用Datatables在Sharepoint列表中进行行分组和小计

您好，我正在使用一个Sharepoint列表，我正在使用DataTables显示该列表，我引用了一篇文章，我要进行分组，但我无法获得组总数

在我分组的这个字段中，有一个计算字段，名为Heirarch。例如，字段值通常类似于大写字母。它是两个字段的串联

下面是我的代码

<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>

tr.group，tr.group:悬停{
背景色：#ddd！重要；
}
波塞尔先生{
字体大小：粗体；
}
$（文档）.ready（函数（）{
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”，
键入：“获取”，
数据类型：“json”，
标题：{
接受：“application/json；odata=verbose”
}
});
call.done（函数（数据、文本状态、jqXHR）{
var标记；
变量表=$（'#示例'）。数据表({
“aaData”：数据d.结果，
“栏目”：[
{
“标题”：“层次结构”，
“mData”：“Hierarch”，
“可见”：错误
}, {
“头衔”：“头衔”，
“mData”：“标题”
}, {
“标题”：“2015年”，
“mData”：“2015年”，
“可排序”：false
}, {
“标题”：“2016年”，
“mData”：“2016年”，
“可排序”：false
}, {
“标题”：“2017年”，
“mData”：“2017年”，
“可排序”：false
}, {
“标题”：“2018年”，
“mData”：“2018年”，
“可排序”：false
}, {
“标题”：“2019年”，
“mData”：“2019年”，
“可排序”：false
}, {
“标题”：“总费用”，
“mData”：“Exp\U x0020\U总计”，
“可排序”：false
}
],
“drawCallback”：函数（设置）{
var api=this.api（）；
var rows=api.rows({
页面：“当前”
}).nodes（）；
var last=null；
api.列（0{
页面：“当前”
}).data（）.each（函数组，i）{
如果（最后！==组）{
$（行）.eq（i）.之前(
$("", {
“类”：“组”，
“数据id”：组
}).append（$（“”）{
“科尔斯潘”：1，
“类”：“pocell”，
“文本”：“层次结构”+组。拆分（“”“）。联接（“”）
})).append（$（“”）{
“id”：“e”+组，
“类”：“无计数”，
“文本”：“60.00”
})).append（$（“”）{
“id”：“f”+组，
“类”：“无计数”，
“文本”：“60.00”
})).append（$（“”）{
“id”：“g”+组，
“类”：“无计数”，
“文本”：“50.00”
})).append（$（“”）{
“id”：“h”+组，
“类”：“无计数”，
“文本”：“40.00”
})).append（$（“”）{
“id”：“i”+组，
“类”：“无计数”，
“文本”：“30.00”
})).append（$（“”）{
“id”：“j”+集团，
“类”：“无计数”，
“文本”：“20.00”
})).prop（“outerHTML”）；
last=组；
}
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（函数（jqXHR、textStatus、errorshown）{
警报（“检索任务时出错：+jqXHR.responseText”）；
});
} );