Row Details Initial

Paweo

Hello,

I was flicking through the forum but unfortunetely without any effects.
Actually, I would like to add row details to well-working data table with json source.
But add row details functionality to my code, I get only error:

[code]
DataTables warning (table id = 'example'): Requested unknown parameter '4' from the data source for row 0
[/code]

When I added one column more, the error dissapeard but still without any row details functionality.
I would appreciate telling me what I am doing wrong.
Thank you in advance.

Here's my whole code:

[code]






/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[3]+'';
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";

$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"bJQueryUI": true,
"bProcessing": true,
"sDom": 'C<"clear">lfrtip',
"bServerSide": true,
"sAjaxSource": "http://localhost:8888/v6.php",
"fnServerData": function( sUrl, aoData, fnCallback ) {
$.ajax( {
"url": sUrl,
"data": aoData,
"success": fnCallback,
"dataType": "jsonp",
"cache": false
} );
}

});

/* 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
*/
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "http://www.datatables.net/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "http://www.datatables.net/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );









Rendering engine
Browser
Platform(s)
cc








[/code]

allan

DataTables does not support colspan or rowspan in the tbody - which is why you are getting the error you are. If you want that in, there are a couple of options - 1. you could leave it as is but remove the colspan details row before initialisating DataTables and then fake a click ($(...).click()) to open the target row - or 2. you could just do the later part.

Allan

Paweo

Oh, I forgot to delete marks. Without this, the erros is the same :(

Paweo

Actually there is no error. It just doesnt put any image, seems as no row details plugin is installed. The code is the same as above, but without . What can cause it? Thank you.

Paweo

Should I modify some details in source code?