Jquery Datatable Row Grouping from 2 different table

Hi Team,

I have below datatable. From this table i want to do row grouping.

I have to take Title column and should start the grouping. But the first value of the row should be a header remaining rows should come as grouping.

In this table red colour text are coming from List 1. And yellow highlighted values are coming from list 2. Now i want to perform groupingg based on red colour title but grouping should be apply only on yellow highlighted.

Please help me on this.

**Current Datatable:**

Title Comments

12344 Demo policy data

12344 Demo data for 12344

12344 Test data for 12344

12344 Tested data for 123443

12345 TestPolicy1

12345 Test data 12345

12345 Demo data

12345 Test record added

12346 12346 data

12347 Test data added

Showing 1 to 10 of 10 entriesPrevious1Next

**Actual Table I am expecting:**

Title Comments

12344 Demo policy data

12344   Demo data for 12344

12344   Test data for 12344

12344   Tested data for 123443

12345 TestPolicy1

12345   Test data 12345

12345   Demo data

12345   Test record added

12346 12346 data

12347 Test data added

Showing 1 to 10 of 10 entriesPrevious1Next

Code:

$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

dataTable.row.add([attachmentscount[j].Title,attachmentscount[j].Attachmentno]).draw(false);

}

});

}

});

$("#table_id").dataTable({ "bLengthChange": false, "bPaginate": false}).rowGrouping({iGroupingColumnIndex: 0,

iGroupingColumnIndex2: 1,

bExpandableGrouping: true,

bExpandableGrouping2: true,

bExpandSingleGroup: false,

iExpandGroupOffset: -2,

sGroupingColumnSortDirection: "asc",

});

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.

$(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(''+results[i].Title+''+results[i].PolicyName+'');

//dataTabletree.row.add([results[i].Title,results[i].Title,results[i].PolicyName]).draw().node();

//primaryrow=dataTable.row.add(['',results[i].Title,results[i].PolicyName]).draw().node();

//primaryrow=dataTable.row.add($(''+titledata+''+results[i].PolicyName+'')).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

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(''+attachmentscount[j].Title+''+attachmentscount[j].Attachmentno+'');

}

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

titledata=finalarr[arrlen].col1;

policyname=finalarr[arrlen].col2;

_policycreation=finalarr[arrlen].col3;

//nexttitledata=finalarr[arrlen+1].col1;

if(_policycreation=="Policycreation"){

$("#tblgrouping").find('tbody').append(''+titledata+''+policyname+'');

}

else if (_policycreation=="AttachmentForm")

{

$("#tblgrouping").find('tbody').append(''+titledata+''+policyname+'');

}

else

{

$("#tblgrouping").find('tbody').append(''+titledata+''+policyname+'');

}

$('.tree-basic').treegrid();

});

Output:

});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Nagarajan Elumalai7y ago
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.

$(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(''+results[i].Title+''+results[i].PolicyName+'');
//dataTabletree.row.add([results[i].Title,results[i].Title,results[i].PolicyName]).draw().node();
//primaryrow=dataTable.row.add(['',results[i].Title,results[i].PolicyName]).draw().node();
//primaryrow=dataTable.row.add($(''+titledata+''+results[i].PolicyName+'')).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
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(''+attachmentscount[j].Title+''+attachmentscount[j].Attachmentno+'');
}
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

titledata=finalarr[arrlen].col1;
policyname=finalarr[arrlen].col2;
_policycreation=finalarr[arrlen].col3;
//nexttitledata=finalarr[arrlen+1].col1;
if(_policycreation=="Policycreation"){
$("#tblgrouping").find('tbody').append(''+titledata+''+policyname+'');
}
else if (_policycreation=="AttachmentForm")
{
$("#tblgrouping").find('tbody').append(''+titledata+''+policyname+'');
}
else
{
$("#tblgrouping").find('tbody').append(''+titledata+''+policyname+'');
}

}
$('.tree-basic').treegrid();
});

});

Output:

});