Expanded rows after ajax refresh

Bolki

Hi,
I am trying to keep my child row expanded after I do an fnDraw refreshing my serverside page but for some reason or another I am not able to keep the row expanded. Any suggestions? The refresh is triggered by the user clicking on an accept button on the child row. My code is the following:
[code]
$('#blup').live('click', function () {


var Row = $(this).attr('row');
var nTrs=$(this).attr('sr');
var oData = oTable.fnGetData(Row);
var vID=oData.RESP[nTrs][5];
var vUI=oData.RESP[nTrs][6];
jQuery.ajax({
type: "POST",
url: "update.php",
data: {ID:+vID,UI:+vUI},
cache: false,
success: function(response)
{


}

});

oTable.fnDraw();
var rowCount = oTable[0].rows.length;
var i;
for (i = 0; i < rowCount; i++) {
if (oTable[0].rows[i]._DT_RowIndex !== undefined) {
if (oTable[0].rows[i]._DT_RowIndex === +Row) {
var nTr = oTable[0].rows[i];
break;
}
}
}
var x = oTable.fnIsOpen(nTr);
var z=oTable.fnClose( nTr );

var x = oTable.fnIsOpen(nTr);
var y= oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );

} );
[/code]
The fnFormatDetails is the standard from this site. attr(row) is an attribute I pass on to the accept button when I create the "details" the first time, basically just _DT_RowIndex.


Any suggestions?

Update: Seems like the draw, even if the row is closed, is not re-setting the fnIsOpen value so now actively close the row, I have updated my code but it is still not working. I have put in the variables purely for debugging

Cheers
D

Bolki

Ok I am really struggling I have tried it with rowCallBack and with fnDrawCallback but all seems to be stalling at fnOpen. Anybody any suggestions how to get this working?

allan

This should work automatically, assuming the same rows are still in the table (i.e. the nodes). If they aren't you'll need to keep an external cache of what elements are open and then reopen them after you do your refresh.

Allan

Bolki

All is still there in the table, a value in the child row is just being changed on the reload (eg the value is changed to accepted) I have tried to store the rows in an external array, similar to the method with the selected rows, the table seems to react correctly to the fnIsOpen and fnCLose but as soon as I try the fnOpen it fails. The general principle of my code is the same as the expand row example. So I am a bit puzzled. The init code is as follows:
[code]
$(document).ready(function() {


/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var aOpen=[];
var oTable = $('#flex2').dataTable( {
"sDom": "Rlfrtip",


"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bFilter": false,
"sAjaxSource": "invitesq.php",
"bProcessing": true,
"bServerSide": true,
"aoColumns": [
{
"mDataProp": "EXP",
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "Col1" },
{ "mDataProp": "Col2", "iDataSort": 4 },
{ "mDataProp": "Col3", "iDataSort": 4 },
{ "mDataProp": "Col4", "sClass": "number-align", "sType": "formatted-num", "asSorting": ["desc", "asc"] },
{ "mDataProp": "Col5", "sClass": "number-align", "sType": "formatted-num", "asSorting": ["desc", "asc"] },
{ "mDataProp": "Col6", "sClass": "number-align", "sType": "formatted-num", "asSorting": ["desc", "asc"] },
{ "mDataProp": Col7", "sClass": "number-align" },
{ "mDataProp": "Col8", "sClass": "number-align" },
{ "mDataProp": "EDIT" } ],
"bAutoWidth": false,
"bStateSave": true


}
});
[/code]


Maybe there is another setting I need?

Cheers
D

allan

Ah - you are using server-side processing. So the internal method of checking is a row is 'open' doesn't work (because the nodes are recreated on every draw). You can see this issue in my own example here: http://datatables.net/release-datatables/examples/server_side/row_details.html .

So what you need is a way to uniquely identify each row (an ID perhaps?) and then have something like I suggested before, an external cache of what elements are open and then reopen them after you do your refresh ( fnDrawCallback ).

Allan

Bolki

Hi,
I have added the fnDrawCallback and created an fnOpenClose function as follows
[code]
function fnOpenClose ( oSettings )
{

var rows=[];
var nTr;
rows=oTable.fnGetNodes();
var i;
var id;
for (i = 0; i< rows.length ;++i)
{
nTr=rows[i];
if (oTable.fnIsOpen(nTr))
{
oTable.fnClose( nTr );
}
id=nTr.id;
for (y=0;y

Bolki

Was a tickle to fast stating that the discussion can be closed. I now obviously run into the prob that the Open image is still shown and not the closed one. How do I now get to a level in the row so that I can change the picture similar to:
[code]
this.src = "images/details_close.png";
[/code]
I tried nTr.cells[0] and then change the value but I guess that is not the correct approach as it didn't work

Cheers
D