Jquery Datatable mit Expandable Row und Bild per Colorbox

[dennis-sauer]

Hallo zusammen,

ich habe ein kleines Problem mit einer Datatable von Jquery. Ich nutze die Variante mit "versteckten" Rows, die mit Hilfe eines kleinen Plus-Symbols dargestellt werden. Dort befindet sich jetzt ein Bild, welches per Klick mit der Colorbox geöffnet werden soll. Es passiert allerdings nur folgendes:

- Ich klicke das Bild an und es verändert sich in das Minuszeichen, welches nach Klick auf das Plus-Symbol auch erscheint. Nix mit Colorbox.

Hier mal der Code:

		<script type="text/javascript" charset="utf-8">
			/* Formating function for row details */
			function fnFormatDetails ( oTable, nTr )
			{
				var aData = oTable.fnGetData( nTr );
				var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px; background:#fff; width:100%;">';
				sOut += '<tr style="background: #FAFAFA;"><td style="width: 20%; font-weight: bold;">Fehlinformation:</td><td>'+aData[6]+'</td></tr>';
				sOut += '<tr style="background: #F3F3F3;"><td style="width: 20%; font-weight: bold;">Fehlerbeschreibung:</td><td>'+aData[7]+'</td></tr>';
				sOut += '<tr style="background: #FAFAFA;"><td style="width: 20%; font-weight: bold;">Name:</td><td>'+aData[8]+'</td></tr>';
				sOut += '<tr style="background: #F3F3F3;"><td style="width: 20%; font-weight: bold;">Screenshot:</td><td>'+aData[9]+'</td></tr>';
				sOut += '</table>';
				
				return sOut;
			}
			
			$(document).ready(function() {


				/*
				 * Insert a 'details' column to the table
				 */
				var nCloneTh = document.createElement( 'th' );
				var nCloneTd = document.createElement( 'td' );
				nCloneTd.innerHTML = '<img src="img/plus.png">';
				nCloneTd.className = "center";
				
				$('#examples thead tr').each( function () {
					this.insertBefore( nCloneTh, this.childNodes[0] );
				} );
				
				$('#examples tbody tr').each( function () {
					this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
				} );
				
				/*
				 * Initialse DataTables, with no sorting on the 'details' column
				 */
				 
				var oTable = $('#examples').dataTable( {
					"sPaginationType": "full_numbers",
					"aoColumnDefs": [
						{ "bSortable": false, "aTargets": [ 0 ] },
						{ "bSearchable": false, "bVisible": false, "aTargets": [ 6 ] },	
						{ "bSearchable": false, "bVisible": false, "aTargets": [ 7 ] },	
						{ "bSearchable": false, "bVisible": false, "aTargets": [ 8 ] },	
						{ "bSearchable": false, "bVisible": false, "aTargets": [ 9 ] },	
						],
					"aaSorting": [[1, 'desc']]
				});


				/* 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
				 */
				$('#examples 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 = "img/plus.png";
						oTable.fnClose( nTr );
					}
					else
					{
						/* Open this row */
						this.src = "img/minus.png";
						oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
					}
				} );
			} );
		</script>

Hat jemand eine Lösung, wie man das Problem umgehen kann!?

Danke