Headers refuse colspan attribute

amnu

As the title says, I fail to make a table's headers use the colspan attribute. I've tried setting it on only one column, on all, inserting empty headings, and whatnot. The heading is centered above the spanned columns as far as HTML is concerned but javascript keeps complaining:

Error: nThs[i - iCorrector] is undefined
Source: http://localhost:1383/thirdparty/DataTable/js/jquery.dataTables.js
Row: 3483

I have exactly one heading for each column and all rows have exactly the same amount of columns - then it works. Removing one .. and placing colspan="2" on another will break it. Funny thing is: the rest of the table gets rendered perfectly. I can even use the search function and everything stays/changes the way it is supposed to with the exception of the broken heading - it simply stays black (default colour).

I tried finding some clues but so far nothing I found resembles this problem. Any suggestions on how to apporach this ?

amnu

I still haven't figured this out...

allan

There must be a unique header cell for each column (i.e. if you have a cell spanning two columns, there much be another row with unique cells for those columns). This is how DataTables knows how many columns are in the table and performs column unique operations on them, such as sorting, filtering etc.

Allan

datzori

Allan, I've understood but.. when the "for" will not find any record.. the system return an error...

timtucker

Here's an interesting work around that I came up with playing around with things a little (tested so far in Firefox 15 and IE 8).

In _fnDrawHead, I changed:
[code]
aoLocal[i][j].cell.colSpan = iColspan;
[/code]
to
[code]
if (aoLocal[i][j].cell.className.indexOf("ignoreColspan") === -1)
{
aoLocal[i][j].cell.colSpan = iColspan;
}
[/code]

In _fnDetectHeader, I changed:
[code]
var iColspan = nCell.getAttribute('colspan') * 1;
[/code]
to
[code]
var iColspan = 1;
if (nCell.className.indexOf("ignoreColspan") === -1)
{
iColspan = nCell.getAttribute('colspan') * 1;
}
[/code]

And in my header, I do the following:
[code]
<!-- These headers don't display -->
Dummy 1
Dummy 2

<!-- This header expands to cover the previous 2 -->
Real Header
[/code]

A bit hackish, but seemingly a little easier than I had expected to get most of the way there.