fnOpen and colspan

joesaland

I've been putting together a datatable for a site that's kind of a mash up of both the detail row example and the row grouping example. So far so good in terms of getting them to work together. The issue I'm having though is one related to formatting of the detail row. I have basically 3 sets of details, each of which corresponds to a group of the existing columns. I'm having problems with colspan on my inserted row.

I formatted my inserted row so that it would be something like this:

[code]















[/code]

I have the exact correct amount of columns as far as I can tell. I certainly covered the exact number of displayed columns since due to the row grouping mechanic there is one hidden column used for that and a bunch of others which provide some of the necessary details for the detail row.

Yet when I use fnOpen to insert my formatted row, it completely ignores my spanning for the inserted row. Instead it does this

[code]

allan

Hi Joe,

I'm afraid that this is working as designed. It might be a bit deficient, but it's doing what it should do at the moment... Something for a future version I think.

A quick way around this would be to put your custom row inside a table inside the cell that DataTables creates. Not so nice - but it would work... Another option is to use the row returned by fnOpen (which will occur in the about to be released v1.6.1) and modify that as needed. That's probably cleaner - and a work around for DataTables lack of flexibility for this new row.

Out of interest, how were you trying to pass it your created row? I don't see a way to do that at the moment.

Regards,
Allan

joesaland

The way I read fnOpen was it's ability to "open or close" a row with whatever custom HTML you passed it. I didn't see anything about the format of that row. I now understand that it was really a single max colspan in that row. I undertsand the need for datatables to ensure that the overall number of columns of any inserted content matches the rest of the table which is why I tried to ensure my details "row" had the correct # of visible columns.

Here is my code:

[code]
var oTable;

function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += ''+aData[11]+''+aData[16]+''+aData[21]+'';
sOut += ''+aData[12]+''+aData[17]+''+aData[22]+'';
sOut += ''+aData[13]+''+aData[18]+''+aData[23]+'';
sOut += ''+aData[14]+''+aData[19]+''+aData[24]+'';
sOut += ''+aData[15]+''+aData[20]+''+aData[25]+'';
sOut += '';
sOut += '';
sOut += ''+aData[26]+''+aData[31]+''+aData[36]+'';
sOut += ''+aData[27]+''+aData[32]+''+aData[37]+'';
sOut += ''+aData[28]+''+aData[33]+''+aData[38]+'';
sOut += ''+aData[29]+''+aData[34]+''+aData[39]+'';
sOut += ''+aData[30]+''+aData[35]+''+aData[40]+'';
sOut += '';
sOut += '';
return sOut;
}

var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

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

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

oTable = $('#dataTable').dataTable({
"fnDrawCallback": function ( oSettings ) {
if ( oSettings.aiDisplay.length == 0 )
{
return;
}

var nTrs = $('#dataTable tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
var i=0;
for ( var i=0 ; i

allan

Hehe - that's a lot of columns :-) Nice!

I see where you were coming from now. The intention of the documentation was that you can pass in any HTML - which will be used _inside_ a cell which is created by DataTables. So I think if you just wrap your sOut in tags, then hopefully it will do the trick for you.

Regards,
Allan

joesaland

Yeah it's a lot of columns, all that hidden data! lol..

Your suggestion is a bit better but it actually doesn't do what I was trying to do. By wrapping it all in a table you lose the connection to the existing layout which is what I was trying to achieve. I wanted to make sure the first group of data, which relates to columns 2-5 in the original table, was fit to format within that same width the original 2-5 makeup. When you wrap the whole thing in a table in a single cell in the original table, the colspans become somewhat meaningless. I think your other suggestion about modifying the inserted row by fnOpen is probably more along the lines of what I need to do. I see 1.6.1 was published but the api doc wasn't updated. Any quick pointer on how to grab that row and swap it for my content?

Thanks!
Joe

allan

Hi Joe,

The API documentation should be up-to-date now: http://datatables.net/api#fnOpen . Basically the parameter returned when you call fnOpen is the TR element that was created. So you can manipulate that - add TD elements, and alter their colspan properties to do what you are looking for :-)

Regards,
Allan