Details Rows - not always works

dawid

I have problem with show hide rows. At my site all action is provided by jQuery. So to change data in table i reload part of site in jQuery. After changing from first table to second table, data rows stop working. Funny thing is that to start details rows working I have to click on sorting or start filtering.

But that is not all.

Sorting and filtering have some issue that makes details row working and not working. For example when I click sorting details works, but when I click sorting for the second time details doestn't work. Of course after third time details works again. The same situation is with filtering.

This is sample of my code:
[code]
var asInitVals = new Array();
var oTable;
function fnFormatDetails ( oTable, nTr )
{ delete(sOut);
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += '';
sOut += '';
sOut += 'DANE UCZESTNIKA';
sOut += 'Imię Nazwisko:'+aData[10]+'';
sOut += 'Specjalizacja:'+aData[8]+'';
sOut += 'Instytucja:'+aData[5]+'';
sOut += 'Info uczestnik:'+aData[6]+'';
sOut += 'Adres:'+aData[9]+'';
sOut += 'Telefon:'+aData[11]+'';
sOut += 'Email:'+aData[12]+'';
sOut += 'Data rejestracji:'+aData[25]+'';
if (aData[24]!=0){
sOut += 'DANE PŁATNIKA';
sOut += 'Nazwa :'+aData[21]+'';
sOut += 'Adres :'+aData[22]+'';
sOut += 'NIP :'+aData[23]+'';
}
else if (aData[24] == 0 || aData[24]=='') {
sOut += 'DODAJ PŁATNIKA';
}
sOut += '';
sOut += '';
sOut += '';
sOut += ''+aData[26]+'';
sOut += '';
sOut += '';

return sOut;
}
//jQuery.noConflict();
jQuery(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

jQuery('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

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

oTable = jQuery('#example').dataTable( {

'aoColumnDefs': [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 5 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 6 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 8 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 9 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 10 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 11 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 12 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 13 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 14 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 17 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 20 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 21 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 22 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 23 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 24 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 25 ] },
{ "bSortable": false, "bVisible": false, "aTargets": [ 26 ] }
],
"fnDrawCallback": fnOpenClose

} );
function fnOpenClose ( oSettings )
{
jQuery('#example tbody td img.det').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
this.src = "../../img/details_open.png";
oTable.fnClose( nTr );;
}
else
{
this.src = "../../img/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
}

jQuery("test input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, jQuery("test input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
jQuery("test input").each( function (i) {
asInitVals[i] = this.value;
} );

jQuery("test input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

jQuery("test input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[jQuery("test input").index(this)];
}
} );
} );
[/code]

At the begining of using datatables oTable was declared into the document.ready and in that situation details didin't work on second table at all. After declaring oTable in the beggining of script details works as I wrote.

On another site where I used DataTables jQuery.noConflict() helped, but now it destroys all other actions.

Please help in this situtation.

PS DataTables are realy great tool!.

dawid

Really no one can help ?