Colspan Hack

rdueck

Here's how I was able to use colspans in my table. I don't care about things like sorting columns, which would probably break the hack - my main reason for using DataTables here is for the fixed headers and first column (the FixedColumns extension).

First, I put all of my "colspanned" columns into the <tfoot>. That did the job, but resulted in 2 scrollbars to deal with - one for the <tbody>, and one for the page.

So then I moved the <tfoot> back into the table after DataTables finished its initialization:

// Initialization
var myTable = $('#myTable').dataTable({ ... });
new $.fn.dataTable.FixedColumns (myTable, {leftColumns:1});

// The colspan workaround - move the footer back into the scrollable body
var leftFoot = $('.DTFC_LeftFootWrapper');
var leftFootHtml = $('table', leftFoot).html();
var scrollFoot = $('.dataTables_scrollFoot');
var scrollFootHtml = $('table', scrollFoot).html();
leftFoot.remove();
scrollFoot.remove();
$('.DTFC_LeftBodyLiner table').append(leftFootHtml);
allData.append(scrollFootHtml);
$('.DTFC_ScrollWrapper').height( $('.dataTables_scroll').height() );

I'd be interested to hear if anyone has a better workaround.

allan

Clever idea - thanks for sharing with us.

I think, at the moment, that anything involving colspan / rowspan in DataTables tbody is going to be a real hack!

Allan