Expand/collapse not working after DOM refreshes

madhuhk

Hello,

Currently i'm using DOM as dtatable data source and i create datatable after fetching table data using AJAX request. Every time on clicking some button, i'm make ajax request to fetch table data, later creates table and inserts in div position, and later i will call datatable functionality. I'm using expand/collapse feature for datatable which is working fine for first time, but after refreshing datatable with new data, expand/collapse doesn't work. Kindly post solution to fix this issue.
Code:


function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
myData = aData;
var sOut = '';

sOut += 'Date Of Birth:'+aData[8]+'';
sOut += 'Age:'+aData[9]+'';
sOut += 'Email:'+aData[10]+'View & Edit Information';
sOut += 'Gender:'+aData[11]+'';
sOut += 'Address:'+aData[12]+'';

sOut += '';

return sOut;
}

function createDataTable(){
var clickedRowId;
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
var oldRow = null ;
var sImageUrl = 'reports/img/';
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/

var oTable = $('#example').dataTable( {
"bFilter": true,
"bJQueryUI": true,
"iDisplayLength": 15,
"sPaginationType": "full_numbers",
"sDom": '<"H"lfr>t<"F"ip>',
"bSort": true,
"bProcessing": true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bSortable": true, "aTargets": [ 1 ] },
{ "bSortable": true, "aTargets": [ 2 ] },
{ "bSortable": true, "aTargets": [ 3 ] },
{ "bSortable": true, "aTargets": [ 4 ] },
{ "bSortable": true, "aTargets": [ 5 ] },
{ "bSortable": true, "aTargets": [ 6 ] },
{ "bSortable": true, "aTargets": [ 7 ] },
{ "bSortable": false, "bVisible":false, "bSearchable": false, "aTargets": [ 8 ] },
{ "bSortable": false, "bVisible":false, "bSearchable": false, "aTargets": [ 9 ] },
{ "bSortable": false, "bVisible":false, "bSearchable": false, "aTargets": [ 10 ] },
{ "bSortable": false, "bVisible":false, "bSearchable": false, "aTargets": [ 11 ] },
{ "bSortable": false, "bVisible":false, "bSearchable": false, "aTargets": [ 12 ] }
],
"aaSorting": [[1, 'asc']]
});
// oTable.fnDraw();

if(flag) oTable.fnDraw();
flag = true;
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here */

$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
//alert();

if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "reports/img/details_open.png";

oTable.fnClose( nTr );
}
else {
if(oldRow != null && oldRow.childNodes[0] != null && oldRow !== nTr){

oldRow.childNodes[0].innerHTML = '';
}
/* Open this row */
this.src = "reports/img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
oldRow = nTr;
} );


}

arindamdas

Hi, Did you get to fix this.