Show/Hide of row details stops working after scrolling

diamondbrother

Hi All,

First of all, many thanks to Allan and his colleagues for this truly amazing piece of (free!!!) software!

I am currently trying to implement hiding and showing of row details while using server side processing and allowing infinite scrolling in y direction.
Before scrolling in y triggers the loading of new entries, everything works just fine. I can click the line that I want to expand and the hidden details appear and the image indicating the state of the line changes as it should. (Closing the line works just as well).

However, after I scroll down and the table updates to show additional entries, clicking on the respective lines doesn't have any effect any more. I am assuming that the code responsible for hiding and showing the lines is not executed, or that loading the additional entries somehow shuffles the indexing of the lines.

I also tried to set bScrollInfinite to false. Once I do that, opening and closing the hidden lines keeps working even after I change from 20 to 100 shown entries.

Does anybody know what is going on? I'd really appreciate the help.

Patrick




Here is part of the code I am using:
[code]
var oTable;
function drawDataTable(){

oTable = $('#resultstable').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": "propperfilter_v02.php",
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "505px",
"iDisplayLength":20,
"bAutoWidth" : false,

},
"fnDrawCallback": function(oSettings){
//Highlight current row:
$('td').bind('mouseenter', function () {
$(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
$('td').bind('mouseleave', function () {
$(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');});
});

$(oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this;
var aPos = oTable.fnGetPosition( this );
if ( $(this).hasClass('row_selected') )
{
/* This row is already open - close it */
$(this).removeClass('row_selected');
oTable.fnClose( nTr );
oTable.fnUpdate( '', aPos, 0,0,1 );
}
else
{
/* Open this row */
$(this).addClass('row_selected');
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
oTable.fnUpdate( '', aPos, 0,0,1 );
}
});
});
}
});
}

[/code]

allan

Hi diamondbrother ,

> First of all, many thanks to Allan and his colleagues for this truly amazing piece of (free!!!) software!

Just me - but thanks very much :-). Great to hear that DataTables is proving to be well received (and well used!)

What you want to do in this case is to use live events, rather than static ones ( http://datatables.net/faqs#events ).

So:

[code]
$(oTable.fnGetNodes() ).each( function () {
      $(this).click( function () {
[/code]

would become:

[code]
$('#resultstable tbody tr').live('click', function () {
[/code]

Regards,
Allan

diamondbrother

Great! That did it. Thanks!