Expanded rows after ajax refresh
Expanded rows after ajax refresh
Bolki
Posts: 6Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
Allan
[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
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
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
[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