Hidden Row and the plus/minus button
Hidden Row and the plus/minus button
jdac74
Posts: 2Questions: 0Answers: 0
Hi all,
I'm using the very useful code to show/hide table rows and have run into a little problem I can't figure out.
The default behavior is to show the Plus image on table load, and to show a Minus image after a row is expanded. So far so good. What I want though is to have either a third image, or no image at all, if there is no actual data to show in the expanded row.
Here's what I have so far:
[code]
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
if (aData[9] != '') {
var sOut = '';
sOut += 'Â Candidates Applied:'+aData[9]+'';
sOut += '';
}
return sOut;
}
jQuery(document).ready(function(){
loadPage();
jQuery("#cboOffice").change( function( e ) {
getValues('Branch2User','cboRecruiters','cboOffice','AllID','','');
} );
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
jQuery('#reportData thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
jQuery('#reportData tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = jQuery("#reportData").dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"iDisplayLength": -1,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"aoColumns": [
/* Expand Row */ null,
/* Office */ null,
/* Recruiter */ null,
/* Company */ null,
/* Job ID */ null,
/* Job Title */ null,
/* Date */ null,
/* Status */ null,
/* Num Applys */ null,
/* Candidates */ {"bVisible":false}
]
});
jQuery('#reportData 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]
+aData[9] is the hidden column that holds the data that's to go in the hidden row when expanded.
I'm sure I've been as clear as mud, but any help is greatly appreciated.
I'm using the very useful code to show/hide table rows and have run into a little problem I can't figure out.
The default behavior is to show the Plus image on table load, and to show a Minus image after a row is expanded. So far so good. What I want though is to have either a third image, or no image at all, if there is no actual data to show in the expanded row.
Here's what I have so far:
[code]
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
if (aData[9] != '') {
var sOut = '';
sOut += 'Â Candidates Applied:'+aData[9]+'';
sOut += '';
}
return sOut;
}
jQuery(document).ready(function(){
loadPage();
jQuery("#cboOffice").change( function( e ) {
getValues('Branch2User','cboRecruiters','cboOffice','AllID','','');
} );
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
jQuery('#reportData thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
jQuery('#reportData tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
var oTable = jQuery("#reportData").dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"iDisplayLength": -1,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"aoColumns": [
/* Expand Row */ null,
/* Office */ null,
/* Recruiter */ null,
/* Company */ null,
/* Job ID */ null,
/* Job Title */ null,
/* Date */ null,
/* Status */ null,
/* Num Applys */ null,
/* Candidates */ {"bVisible":false}
]
});
jQuery('#reportData 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]
+aData[9] is the hidden column that holds the data that's to go in the hidden row when expanded.
I'm sure I've been as clear as mud, but any help is greatly appreciated.
This discussion has been closed.
Replies