使用jquery Datatable的行分组2列表数据

Question

我有 2 个 SharePoint 列表。第一个列表有 Title、Desc。第二个列表有标题、评论。

我必须查询这两个列表并开始执行行分组。

在两者中，列表标题都是匹配的列。现在我能够从两个列表中获取所有值。但不能进行分组。

CurrentDatatable
Title   Comments
12344   Demo policy data - First List
12344   Demo data for 12344
12344   Test data for 12344
12344   Tested data for 123443
12345   TestPolicy1 - First List
12345   Test data 12345
12345   Demo data
12345   Test record added
12346   12346 data - First List
12347   Test data added - First List
Showing 1 to 10 of 10 entriesPrevious1Next

我可以分组，但所有数据都被分组了。但我希望第一个列表数据应该是行组的标题，第二个列表数据应该被分组。

    $pnp.sp.web.lists.getByTitle("TestPolicyNo").items.select("Title","PolicyName").top(5000).get().then(function(results) {
        var uniquepolicynumber= new Set();
        for (var i = 0; i < results.length; i++)
        {
        dataTable = $("#table_id").DataTable();
        dataTable.row.add([results[i].Title,results[i].PolicyName]).draw(false);
        $pnp.sp.web.lists.getByTitle("Testattachment").items.select("Title","Attachmentno").top(5000).filter("Title eq '"+results[i].Title+"'").get().then(function(attachmentscount) {
        for( j=0; j<attachmentscount.length;j++){
        dataTable.row.add([attachmentscount[j].Title,attachmentscount[j].Attachmentno]).draw(false);
        }
        });
        }
        });
datatable
        $("#table_id").dataTable({ "bLengthChange": false, "bPaginate": false}).rowGrouping({iGroupingColumnIndex: 0,
        iGroupingColumnIndex2: 1,
        bExpandableGrouping: true,
        bExpandableGrouping2: true,
        bExpandSingleGroup: false,
        iExpandGroupOffset: -2,
        sGroupingColumnSortDirection: "asc",
        });

我期待的实际表格：

Title   Comments
12344   Demo policy data
 >> 12344     Demo data for 12344
 >> 12344     Test data for 12344
  >>12344     Tested data for 123443
12345   TestPolicy
  >>12345      Test data 12345
  >>12345      Demo data
  >>12345      Test record added
12346   12346 data`enter code here`
12347   Test data added
Showing 1 to 10 of 10 entries Previous Next

Answer 1

I am able to do the row grouping with primary table header data and child data. Please refer the below code. I have used treegrid jquery to show the content.  

<script type="text/javascript" src="/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="h/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>

 <link rel="stylesheet" type="text/css" href="/css/jquery.treegrid.css">

$(document).ready(function(){

$pnp.sp.web.lists.getByTitle("TestPolicyNo").items.select("Title","PolicyName","PolicyCreation").orderBy('Title',true).get().then(function(results) {
for (var i = 0; i < results.length; i++)
{
titledata=results[i].Title;
policyname=results[i].PolicyName;
_policycreation=results[i].PolicyCreation;
$("#tblpolicy").find('tbody').append('<tr class="treegrid-'+i+'"><td><span class="sign"></span></td><td>'+results[i].Title+'</td><td>'+results[i].PolicyName+'</td></tr>');
//dataTabletree.row.add([results[i].Title,results[i].Title,results[i].PolicyName]).draw().node();
//primaryrow=dataTable.row.add(['<tr><td><span class="sign"></span></td></tr>',results[i].Title,results[i].PolicyName]).draw().node();
//primaryrow=dataTable.row.add($('<tr><td><span class="sign"></span></td><td>'+titledata+'</td><td>'+results[i].PolicyName+'</td></tr>')).draw().node();
//$(primaryrow).addClass("treegrid-"+i);
//$(primaryrow).attr('id',"primary");
//$(primaryrow).attr('data-toggle',"collapse");
//$(primaryrow).attr('data-target',".demo"+results[i].Title);
var obj={};
obj.col1=titledata;
obj.col2=policyname;
obj.col3=_policycreation;
arrdata.push(obj);
}
$pnp.sp.web.lists.getByTitle("Testattachment").items.select("Title","Attachmentno","AttachmentForm").orderBy('Title',true).get().then(function(attachmentscount) {
for( j=0; j<attachmentscount.length;j++){
titledata=attachmentscount[j].Title;
policyname=attachmentscount[j].Attachmentno;
_polattachment=attachmentscount[j].AttachmentForm;
var objdata={};
objdata.col1=titledata;
objdata.col2=policyname;
objdata.col3=_polattachment;
arrattachment.push(objdata);
// $("#tblgrouping").find('tbody').append('<tr class="treegrid-parent-'+k+'"><td><span class="sign"></span></td><td>'+attachmentscount[j].Title+'</td><td>'+attachmentscount[j].Attachmentno+'</td></tr>');
}
finalarr=arrdata.concat(arrattachment);
finalarr=finalarr.sort(function(a,b)
{
return a.col1 - b.col1
});
//finalarr=groupBy(finalarr,finalarr=>finalarr.col1);
for(var arrlen=0; arrlen<finalarr.length;arrlen++){
titledata=finalarr[arrlen].col1;
policyname=finalarr[arrlen].col2;
_policycreation=finalarr[arrlen].col3;
//nexttitledata=finalarr[arrlen+1].col1;
if(_policycreation=="Policycreation"){
$("#tblgrouping").find('tbody').append('<tr class="treegrid-'+titledata+'"><td><span class="sign"></span></td><td>'+titledata+'</td><td>'+policyname+'</td></tr>');
}
else if (_policycreation=="AttachmentForm")
{
$("#tblgrouping").find('tbody').append('<tr class="treegrid-parent-'+titledata+'"><td><span class="sign"></span></td><td>'+titledata+'</td><td>'+policyname+'</td></tr>');
}
else
{
$("#tblgrouping").find('tbody').append('<tr class="treegrid-'+titledata+'"><td><span class="sign"></span></td><td>'+titledata+'</td><td>'+policyname+'</td></tr>');
}
}
$('.tree-basic').treegrid();
});
});


});
Output:
[enter image description here][1]


  [1]: https://i.stack.imgur.com/mTV9g.png