Datatable doesnt colapse the row details after refresh
Datatable doesnt colapse the row details after refresh
juls
Posts: 3Questions: 0Answers: 0
HI
I found this tool very handy and useful, Thank you for this great tool but I have a problem when the page is reloaded and the table data are repopulated.
it works perfect the first time, but i have a form where user can select values and when they click on the button, the table is repopulated with values, everything works fine, except that, when repopulated, if you open the row details, it doesn't close.
this is my code.
[code]
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = 'center';
$('#order_table thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#order_table tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = $('#order_table').dataTable( {
'bPaginate': false,
'sDom': 'Tlfrtip',
'bDestroy': true,
'aoColumnDefs': [
{ 'bSortable': false, 'aTargets': [ 0 ] }
],
'aaSorting': [[1, 'asc']]
} ); $('#order_table tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr))
{
this.src = \"../../css/lib/datatable/images/details_open.png\";
oTable.fnClose( nTr );
}
else
{
var aData = oTable.fnGetData( nTr );
this.src = \"../../css/lib/datatable/images/details_close.png\";
Members.fnFormatDetails(oTable, aData,nTr);
}
} );
[/code]
fnFormatDetails:function( oTable, aData,nTr )
{
$.ajax({type: "POST",
url: "js/order_requests.php?req=order_details&order_number="+aData[1]+"",
success: function(msg){ oTable.fnOpen( nTr, msg , 'details' );}
});
}
the ajax call in the function fnFormatDetails creates an inner table.
please help
I found this tool very handy and useful, Thank you for this great tool but I have a problem when the page is reloaded and the table data are repopulated.
it works perfect the first time, but i have a form where user can select values and when they click on the button, the table is repopulated with values, everything works fine, except that, when repopulated, if you open the row details, it doesn't close.
this is my code.
[code]
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = 'center';
$('#order_table thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#order_table tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = $('#order_table').dataTable( {
'bPaginate': false,
'sDom': 'Tlfrtip',
'bDestroy': true,
'aoColumnDefs': [
{ 'bSortable': false, 'aTargets': [ 0 ] }
],
'aaSorting': [[1, 'asc']]
} ); $('#order_table tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr))
{
this.src = \"../../css/lib/datatable/images/details_open.png\";
oTable.fnClose( nTr );
}
else
{
var aData = oTable.fnGetData( nTr );
this.src = \"../../css/lib/datatable/images/details_close.png\";
Members.fnFormatDetails(oTable, aData,nTr);
}
} );
[/code]
fnFormatDetails:function( oTable, aData,nTr )
{
$.ajax({type: "POST",
url: "js/order_requests.php?req=order_details&order_number="+aData[1]+"",
success: function(msg){ oTable.fnOpen( nTr, msg , 'details' );}
});
}
the ajax call in the function fnFormatDetails creates an inner table.
please help
This discussion has been closed.
Replies
http://datatables.net/forums/discussion/685/fnclose-not-working/p1