**PLEASE HELP** hidden row example is not drawing rows
**PLEASE HELP** hidden row example is not drawing rows
Hi all,
I want to use a hidden row details example. But I can't make it work. I am using "Extend" button on the same table as well. I have tried without it too but still I haven't got it to work.
In TH everything is done correctly but in the TR there is no empty space with the icons.
I am sending you debug code so you can see what might went wrong in my code.
Debug link: http://debug.datatables.net/uvifax
I want to use a hidden row details example. But I can't make it work. I am using "Extend" button on the same table as well. I have tried without it too but still I haven't got it to work.
In TH everything is done correctly but in the TR there is no empty space with the icons.
I am sending you debug code so you can see what might went wrong in my code.
Debug link: http://debug.datatables.net/uvifax
This discussion has been closed.
Replies
This code is not working for me.
[code]
$('#jphit tbody tr').each( function ()
{
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
[/code]
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#jphit thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#jphit tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable=$('#jphit').dataTable( {
"sDom": 'T,C<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf"
},
"oColVis": {
"buttonText": "Extend table",
"activate": "mouseover"
},
"aoColumnDefs": [
{ //"bVisible": false, "aTargets": [ 0 ],
"bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1,'asc']],
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sScrollY": "350px",
"bDeferRender": true,
"sAjaxSource": "increment_table.php"
} );
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#jphit tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
[/code]
I have put pictures and so on..
Alan I was hoping of getting your attention because I am sure that this is a simple problem to be solved.