fnOpen not compatible with fnRowCallback and bServerSide

jimmcslim

Hey,

I'm trying to open the 'row details' for certain rows that the server-side reports as having additional messages to be displayed (error, warning messages). I am sending the data in an additional column that is ultimately not visible, but the fnRowCallback aData argument happily has the data visible to it. So if the value for the row is != "" then I call oTable.fnOpen(nRow, aData[x], "my_new_class")

But it seems that fnOpen doesn't create the row if the parent row hasn't been added to the table yet. However the row creation doesn't get queued up when bServerSide == true (/* No point in storing the row if using server-side processing since the nParent will be nuked on a re-draw anyway */).

Is there another way to achieve this? I'm thinking of maybe doing it in fnDrawCallback, although I have had infinite loops result from trying to do too much there. I basically want to open rows in response to each call to the server (eg, sorting and paging).

jimmcslim

Have managed to sort this, turns out that fnDrawCallback is a good place to do this.

gregcrv

and ? how did you manage ??

Have the same problem trying to combine the "hidden row information" and "selectable rows" examples in order to do a "show detail" that remembers what's open after a redraw but fnOpen does not seem to work in the fnRowCallback function...

gregcrv

anyone knows how to do this ??

this is the code from "select_rows.html" modified by adding a few lines :

[code]

var oTable;
var gaiSelected = [];

$(document).ready(function() {
$('#form').submit( function() {
alert (gaiSelected);
return false;
} );

/* Init the table */
oTable = $("#example").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://datatables.net/examples/examples_support/server_processing_id.php",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
oTable.fnOpen(nRow, aData[0], 'details'); // Added
}
return nRow;
},
"aoColumnDefs": [
{ "bVisible": 0, "aTargets": [0] }
]
});

/* Click event handler */
$('#example tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[0];

if ( jQuery.inArray(iId, gaiSelected) == -1 )
{
gaiSelected[gaiSelected.length++] = iId;
oTable.fnOpen(this, iId, 'details'); // Added
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
oTable.fnClose(this); // Added
}

$(this).toggleClass('row_selected');
} );
} );

[/code]

when I click on a row, the details show up, when I click again they hide as expected.
But when I do next page and then back to previous, the select class on the row is still there but no more details ! :(
I did something wrong ?

edit: I have no error in the js console...

gregcrv

hey allan,

I tried to review the datables code but I get lost at some point... so not sure, if this a bug or a normal behavior...
please check the above code !!

thank you so much !
greg