Row Details

Good afternoon,

Allan - all I have to say is "WOW - Thank you!" on this great platform!

Hopefully the code below will shed some light on my issue. Anytime I add data to with fnRender and aData the values also show up in the details table. SO I think oTable is being used to render both tables, Correct? if so, how would I separate the information and formatting being used in the summarized table from the details table?

Thanks in advanced!

var oTable;
			
			
			/* Formating function for row details */
			
                      function fnFormatDetails ( nTr )
			{
				var aData = oTable.fnGetData( nTr );
				var sOut = '<table cellpadding="5" cellspacing="1" border="0" style="padding-left:40px;">';
				sOut += '<tr>';
				sOut += '<td class="eg-bar">';
				sOut += '<span id="faqtable1-title" class="iconspan"></span>Patient Information</td><td>Patient Diabetic</td><td>City</td>';
				sOut += '<tr class="d0">';
				sOut += '<div id="faqtable1" class="icongroup2">';
				sOut += '<td>'+aData[4]+' '+aData[5]+'</td>';
				sOut += '<td>'+aData[3]+'</td></tr></div>';
				sOut += '<tr class="d0"><td>Address</td><td>'+aData[7]+'</td>';
				sOut += '<td>'+aData[8]+'</td>';
				sOut += '<td>'+aData[9]+'</td>';
				sOut += '<td>State</td><td>'+aData[10]+'</td>';
				sOut += '<td>Zip Code</td><td>'+aData[11]+'</td></tr>';
				sOut += '<tr class="d0"><td>Age</td><td>'+aData[12]+'</td></tr>';
				sOut += '<tr class="d0"><td>DOB</td><td>'+aData[13]+'/'+aData[14]+'/'+aData[15]+'</td></tr>';
				sOut += '<tr>';
				sOut += '<td class="eg-bar">';
				sOut += '<span id="faqtable2-title" class="iconspan"></span>Surgical Information</td></tr>';
	sOut += '<tr class="d0"><td><div id="faqtable2" class="icongroup2">Anatomical Parts</td><td>'+aData[13]+' '+aData[14]+'</td><td>Anatomical Location</td></tr></div>';
				sOut += '<tr class="d0"><td><div id="faqtable2" class="icongroup2">Primary Insurance:</td><td>'+aData[15]+' '+aData[16]+'</td></tr></div>';
				sOut += '<tr class="d0"><td><div id="faqtable2" class="icongroup2">:</td><td>'+aData[17]+' '+aData[30]+'</td></tr></div>';
				sOut += '</table>';
				return sOut;
			}
			
			$(document).ready(function() {
				 oTable = $('#patient').dataTable( {
					"bJQueryUI": true,
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "scripts/details_col_targets.php",
					"bDeferRender": true,
					"aoColumns": [
					{"mData": 0},
					{"mData": 1},
					{"mData": 2},
					//{"mData": function ( oObj ) {return oObj.aData[4] +' '+ oObj.aData[5];},"bVisible": true},
					
					
					{"mData": 4},
					
					//{"mRender": function ( data, type, row ) {return row.aData[4] +' '+ row.aData[5];}},
					{"mData": 5},
					//{"mData": 45},
					
					//{ "sClass": "center","bVisible": true, "aTargets": [ 0,1,2] },
					//{ "mData": 8,"bVisible": true, "aTargets": [ 3 ] },
					
					//{"fnRender": function ( oObj ) {return oObj.aData[50] +'/'+oObj.aData[51] +'/'+ oObj.aData[52];},"bVisible": true, "aTargets": [ 4 ]},
					//{"fnRender": function ( oObj ) {return oObj.aData[45];},"bVisible": true, "aTargets": [ 5 ]},
					
					{ "bVisible": false, "aTargets": [ '_all' ] }]
                    
					//"aaSorting": [[1, 'desc']]*/
				} );
				
				$('#patient 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(nTr), 'details' );
					}
				} );
			} );