Using TableTools with grouped-column (colspan) headers?

sarah

Hi,
DataTables and TableTools are absolutely fantastic for what I want to do. I'm just having one issue - exporting a table that uses colspan in the table header (to create grouped columns) doesn't come out right in PDF. Has anyone made this work?
Thanks!
Sarah

sarah

Ok, in case anyone else wants to do something like this in the future: I spent some time creating a "bGroupedHeader" option for myself to handle tables with grouped columns in the header. If bGroupedHeader is true, the TableTools output adds the grouping name in front of each column that is in a group. So a table with 3 columns named X, Y, Z under the grouping of "foo" will output each sub-column as single columns labeled "foo: X", "foo: Y" and "foo: Z". any columns not in a group are left alone and output normally.

I had to go through the DOM for this so it's a little messy, but it gets the job done. Here is the code if anyone is interested.

[code]

/*
* Header
*/

if ( oConfig.bHeader )
{


if (oConfig.bGroupedHeader)
{

/* get HTML of the table */
var sSelector = this.s.dt.oInstance.selector;
sSelector = sSelector.replace(/#/g, "");
var nWholeTable = document.getElementById(sSelector);

/* cell position - to mark the column header, to be used in determining which cells are included or not */
var iCellPosition = 0;
var aSecondRowCells = new Array();

/* create an array of cells in the second row */
for (var k = 0; k < nWholeTable.tHead.rows[1].cells.length; k++)
{
aSecondRowCells.push(nWholeTable.tHead.rows[1].cells[k]);
}

for (var i = 0; i < nWholeTable.tHead.rows[0].cells.length; i++)
{
/* go through cells in top row of table header */
/* this contains groupings, and cells with rowspan 2 (ungrouped col headers) */
if (nWholeTable.tHead.rows[0].cells[i].hasAttribute("rowspan") && (nWholeTable.tHead.rows[0].cells[i].rowSpan > 1))
{
if (aColumnsInc[iCellPosition])
{
sLoopData = nWholeTable.tHead.rows[0].cells[i].innerHTML.replace(/\n/g," ").replace( /<.*?>/g, "" ).replace(/\t/g, "");
sLoopData = this._fnHtmlDecode( sLoopData );
sData += this._fnBoundData( sLoopData, oConfig.sFieldBoundary, regex ) +
oConfig.sFieldSeperator;
}
iCellPosition++;
}
else if (nWholeTable.tHead.rows[0].cells[i].hasAttribute("colspan"))
{
/* get cell text */
var sHeaderGroupText = nWholeTable.tHead.rows[0].cells[i].innerHTML.replace(/\n/g," ").replace( /<.*?>/g, "" ).replace(/\t/g, "");
sHeaderGroupText = this._fnHtmlDecode( sHeaderGroupText );
/* get colspan size */
var iColspan = nWholeTable.tHead.rows[0].cells[i].colSpan;
/* for j = 0 to colspan */
/* get colspan number of cells in second row: these are the grouped columns under cell i */
/* for each of those cells, add cell i's content to the front of cell j (add header text to grouped cell name) */
/* use this new title as the header for table export */
for (var j = 0; j < iColspan; j++)
{
if (aSecondRowCells.length > 0)
{
/* take the first cell in the array and test if it is included/add it */
var cell_to_add = aSecondRowCells.shift();
if (aColumnsInc[iCellPosition])
{
sLoopData = cell_to_add.innerHTML.replace(/\n/g," ").replace( /<.*?>/g, "" ).replace(/\t/g, "");
sLoopData = this._fnHtmlDecode(sHeaderGroupText + ": " + sLoopData );
sData += this._fnBoundData( sLoopData, oConfig.sFieldBoundary, regex ) +
oConfig.sFieldSeperator;

}
iCellPosition++;
}
}
}
}

sData = sData.slice( 0, oConfig.sFieldSeperator.length*-1 );
sData += sNewline;
}
else
{

for ( i=0, iLen=dt.aoColumns.length ; i/g, "" ).replace(/\t/g, "");
sLoopData = this._fnHtmlDecode( sLoopData );

sData += this._fnBoundData( sLoopData, oConfig.sFieldBoundary, regex ) +
oConfig.sFieldSeperator;
}
}
sData = sData.slice( 0, oConfig.sFieldSeperator.length*-1 );
sData += sNewline;

}

}



[/code]

w1zard

I'm stunned. This is what I need, but I don't have the foggiest how to implement the code shown above. I just cant see where it fits in. I need to ensure that table tools doesnt break, but I also need to get grouped headers to appear.

Here is an example of my code, so far, I cannot even get the grouped headers to work without breaking the column sorting. (The sorting still works, but the process is broken because its creating additional div tags in the wrong place because it cannot find the header columns where it expects them.)

Can anyone help? I would have though data tables being the almighty tool it is, could hand grouped columns :'(


[code]



Col1
Col2
Col3
Col4
Col5
Col6
Col7
Col8
Col9
Col10




1
2
?
1
?
?
?
?
?
?


1
3
?
1
?
?
?
?
?
?



[/code]
[code]
$(document).ready(function() {
// DataTables Config (more info can be found at http://www.datatables.net/)
var oTable = $('.datatable').dataTable( {
"bJQueryUI": true,
"bSortClasses": false,
"aaSorting": [[0,'asc']],
"bAutoWidth": true,
"bInfo": true,
"sScrollY": "100%",
//"sScrollX": "100%", //Remove scroll bar when decreasing table width (ie. on browser resize)
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"bRetrieve": true,
"aoColumns": [
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }],
//{ "bSortable": false ,"sWidth": "125px" },
//{ "bSortable": false ,"sWidth": "410px" }],
} );

$(window).resize(function(){
oTable.fnAdjustColumnSizing();
});





$('[rel="mainHeader"] :first').parent().before('\
 \
Group 1\
 \
Group 2\
 \
');

});
[/code]