Expand / Collapse of a row not working if multiple rows are added to the table on page button click

ssshannu

Hi All

I am trying to implement a requirement where clicking on pagination buttons should fetch records from the service and add to the datatable. Also we have incorporated row click to expand/collapse the child rows. Expanding All rows clicking on a link has worked previously before implementing page button on click logic. But now for some reason the logic is not working.

Can some one please guide me where I have gone wrong. Below is my code snippet
On page load we are displaying 30 records showing 5 per page having 6 page numbers. Now if user clicks on page number 6, we need to hit service and add 30 more records to the datatable. For the first 30 records Expand All/Collapse All is working. but once another 30 records are added my Expand All is not working.
On page load am calling callService method.

<script>
var isCollapse = 1;

function callService(){ alert('Hitting Service');
actionfunMTV(); // calls a method in class and oncomplete calls mtvaftercomp method }

var sPageNumber = 0;
var sPageCriteria = 5;
var MTVRemarksDataTable;
function mtvaftercomp(res,pageind) {

var mtvclaim = res;
$("#MTVRemarksTable").dataTable().fnDestroy();
MTVRemarksDataTable = $('#MTVRemarksTable').dataTable({
"ajax": function (data, callback, settings) {
callback(
JSON.parse(mtvclaim)
);
},
"columns": [
{ "data": "entitytype" },
{ "data": "identifier" },
{ "data": "type" },
{ "data": "category" },
{ "data": "createddate" },
{ "data": "text" }
],
"bStateSave": false,
"lengthMenu": [[5,10,25,50,75,100], [5,10,25,50,75,100]],
"sPaginationType": "simple_numbers",
"dom": 'B<"top"flp<"clear">>rt<"bottom"ip<"clear">>',
"iDisplayLength": sPageCriteria

});

MTVRemarksDataTable.fnPageChange(sPageNumber,true);

$('#MTVRemarksTable_paginate').on('click', function(event){
var info = MTVRemarksDataTable.api().page.info();
sPageNumber = info.page; //starts from zero index
var sRecordsTotal = info.recordsTotal;
sPageCriteria = info.length;

var sPage;
sPage = sRecordsTotal/sPageCriteria;
if( (sPageNumber+1) == Math.ceil(sPage))
{
callService();
}
});

$('#MTVRemarksExpandLink').on('click', function(event)
{
if(isCollapse == 1){
$('#MTVRemarksExpandLink').html('<u><font color="blue">Collapse All Rows</font></u>');
isCollapse = 0;
}
else{

$('#MTVRemarksExpandLink').html('<u><font color="blue">Expand All Rows</font></u>');
isCollapse = 1;
}
Accordion_MTVRemarks();
});

$('#MTVRemarksTable tbody').on('click', 'tr', function () {
var data = MTVRemarksDataTable.api().row( this ).data();
var tr = $(this).closest('tr');
var row = MTVRemarksDataTable.api().row(tr);
if ( row.child.isShown() )
{
row.child.hide();
tr.removeClass('shown');
}
else
{
row.child(Expand_MTVRemarks(row.data())).show();
tr.addClass('shown');
}
} );
}
function Accordion_MTVRemarks()
{
var rows = MTVRemarksDataTable.fnSettings().aiDisplay;
for (index in rows)
{
var tr = $(this).parents('tr').eq(rows[index]);
var row = MTVRemarksDataTable.api().row(rows[index]);
if ( isCollapse == 1 ) {
row.child.hide();
tr.removeClass('shown');
}
else {
row.child(Expand_MTVRemarks(row.data()) ).show();
tr.addClass('shown');
}
}
}

function Expand_MTVRemarks( d ) {

var MTVRemarksChildTable = '

'; MTVRemarksChildTable += ''; MTVRemarksChildTable += '

Text	'+d.accText+'

';
return MTVRemarksChildTable;
}

</script>

<apex:actionFunction name="actionfunMTV" action="{!getMtvData}" oncomplete="mtvaftercomp('{!sjsondata
<a href="" id="MTVRemarksExpandLink"><u><font color="blue">Expand All Rows</font></u></a> ```