[Warning] Unexpected number of TD elements.

perso80

Hello,

"Datatable doesn't support rowspan/colspan in the table body"

I tried 1.6.1 version on a html table which runs perfectly with datatable 1.6.0

The only particularity of my html table is that it contains 2 rows in the thead and a cell contains a rowspan.

Somebody has an idea ?

Thanks.

allan

Hi perso80,

I think you answered your own question there :-). You mention that you have a rowspan, which, as the error says, is not supported in DataTables (in tbody - it should work fine in thead/tfoot). I added this warning in to 1.6.1, because it could give very unpredictable results if this condition was ignored (i.e. there are actually less TD elements that DataTables thinks there are, which is a row x column count). It's possible that you were 'getting away with it' with 1.6.0 - but it would have likely broken eventually. Sorry... but I think you'll need to remove the rowspan to use 1.6.1 and up.

Regards,
Allan

perso80

Hi Allan,

i didn't answer at my question. I thought that wasn't a problem to use rowspan and colspan for element.
You says : "it should work fine in thead/tfoot"
I use rowspan/colspan in thead.

See my piece of code :

[code]



Grand titre
Grand titre2
Creator


Id
Code
Date
Année
Id
Réf
R S
City




67
...
[/code]

Thanks.

jaylward

Unfortunately, this issue breaks the hidden row details example which I have used extensively. Have you got any suggestions as to how to get around this problem? Just to be clear, it is only Internet Explorer that exhibits the problem - grrrrr.

allan

When I said "it should work fine in thead/tfoot" - there was an exception, and I'm sorry to say you'd hit it... DataTables requires that you have a unique TH for each column. In the above table you've only got one unique TH for a column - the 'Creator' one.

This example shows how DataTables expects col/row spans to be used in the header: http://datatables.net/examples/advanced_init/complex_header.html . The reason for this requirement is mainly to do with the sorting - if you click of a column header which is 'colspan' - which column does it apply to!? As such, DataTables is actually only detecting three columns from your header, but eight in your table's body - hence the trouble.

It might be possible in the long run to make DataTables accept this behaviour and see the colspans - and when sorting just sort on the first column. Something to think about for a future version I think.

Quite surprised this worked at all in any version of DataTables actually :-)

Regards,
Allan

perso80

Hello Allan,

i don't know if i understood your explication. I saw also your example.

Ok, i can't click on a "colspan" th (not a sort button). Then, you say "DataTables is actually only detecting three columns from your header, but eight in your table's body - hence the trouble."

In your example, i see in the code 3 th in the thead and 5 td in the tbody.
datatables must have a problem.

I begin with this plugin.

Thanks for your help.

Mithrus

Quote: "if you click of a column header which is 'colspan' - which column does it apply to!? "

Why not have the sorting treat the spanned columns as a single unit? Essentially, clicking on the th would "automatically" select all the associated columns as a group. It would be no different than a user selecting col1 then col2 then colx for however many cols were spanned.

Ahh, but in the example above, there are two TRs in the THEAD, and I think that is where the confusion could be. The top TR could be mapped to the lower one, but that introduces a need to declare a "primary" TR in the THEAD. I suppose as long as all the TRs can be aligned, then it shouldn't be impossible to do a mapping, but ugh.

allan

@perso80: As Mithrus points out there are two TR elements in the header. Each column has it's own unique cell which can be clicked on (the middle three are on the second row). So no problem in DataTables there :-). You must have a unique cell for each column at the moment - this is a requirement of DataTables for it to function properly. Hopefully this requirement will be relaxed in future.

@Mithrus: I fully agree. What I would propose in that situation is that the 'child columns' (for lack of a better phrase) would be multi-column sorted by DataTables. Of course the fun begins if the TR elements are swapped around in my example - that would be a confusing interaction (and a confusing table in general!). I really hope to build up a much stronger colspan / rowspan support in future versions of DataTables - the real trick is getting them to work in the body...

Regards,
Allan

perso80

It's the code of complex example :

[code]


Rendering engine

Browser details
CSS grade


Browser
Platform(s)
Engine version





Trident
Internet
Explorer 4.0
Win 95+

4
X

[/code]

I don't see the difference with my example.
2 tr in the thead (my example, 2)
use colspan and rowspan in the thead.
5 td in the tbody (my example, 8).


You say : "Each column has it's own unique cell which can be clicked on (the middle three are on the second row)"

For my example :
[code]Grand titre[/code] is associated with :
[code]Id
Code
Date
Ann

allan

Hi perso80,

Sorry - I think we might have crossed wires a bit, and I got a bit confused! Yes, your header does look to be perfectly valid. So the error suggests that your tbody doesn't have rows * 9 (the columns) cells. If you validate the HTML - does it show any errors. Can you post a link to an example please?

Regards,
Allan

perso80

Hi Allan,

thanks for your investment.
I put down a zip file on http://dl.free.fr/thvMcdyte

You will have an error message on the run of this code.

Thanks in advance Allan.

allan

Hi perso80,

Yup - your HTML table isn't "valid" (I quote that, because the w3c validator says it is...). You've got 9 columns in the header (4 + 4 + 1), but 10 in the table body (i.e. 10 TD elements in each TR). This is what is causing the problem. Specifically the column: "Saisie" doesn't have a header.

Regards,
Allan

perso80

Hi Allan,

i put in comment "a" in the THEAD.
I've got 10 columns in the header (4 + 4 + 1 + 1) and 10 in the TBODY (i.e. 10 TD elements in each TR in TBODY).
However, i have always the same error message.

jaylward

Allan - have you got any comment on fixing the hidden details row example? My simple brain cannot work out an answer!

allan

@perso80:I think I've got it this time :-). Your aoColumns definition only has 9 columns in it. Hence DataTables expects only 9 - but you've got ten in your table. Comment in the 10th TH element and add another 'null' to aoColumns and it should work fine.

@jaylward: I'm not sure I see what the problem is with hidden details row (I'm just not sure what your use case is). Could you possibly open a new thread with information about that, including an example please?

Regards,
Allan

jaylward

Allan - I will start another thread if you would like, but my problem is the same as in this thread. I have used the hidden details row example to enable users to expand the information on a particular record - as per the example on your site. However, I am now getting the ' [Warning] Unexpected number of TD elements' message on load in Internet Explorer because the output from using the hidden row example creates the following code which includes a colspan for the details row:

[code]




Full Description:
Oracle


Contact:Name


Links:
 




[/code]

This code works OK in Firefox and Safari etc, but not in IE ... now.

Any ideas?

Kind regards

John

sbabych

hi Allan, I have the same warning and error in IE. I have no rowspans or colspans.
Code works fine in Firefox, Chrome, Opera, Safari.
The same problem was in version 1.5.6 and 1.6.1(here with warning)
Thank you.

P.S. problem was found. probably will help to somebody:
I initialize dataTables with aoColumns property:
[code]
"aoColumns": [
{"bSearchable": false, "bSortable": false},
{"bSearchable": true, "bSortable": true},
]
[/code]
where was "," after the last value. And that cause problem in IE.

perso80

Thanks Allan !

If i had been more attentive, i wouldn't have you done to waste your time.
My definition aocolumns was bad as you said it.

Now, the code runs.

For sbabych, yes, "," at the end of a declaration is a problem for IE, it's true.


Thanks for all Allan, your help, your investment et continues to develop this wonderful plugin, it's indispensable.

jaylward

Allan - an update. My issue is fixed by removing the "," at the end of the declaration. Thanks. Keep up the good work!

Antikon

Hi Allan,

The alert "Unexpected number of TD elements" will also popup when you define an aoColumns array and number of elements is not equal to table's columns.

In previous versions of Datatables, when the number of elements in aoColumns array was less than the number of columns, columns that have not been described in an array simply could not be sorted (and, perhaps, could not be sorted). This behavior was quite expected and logical, and in the current version and it has remained the same, except the alert.

What do you think about removing the alert in this case? Or it's better for me to pre-calculate the number of columns before initializing Datatables?

Best regards,
Antikon

allan

Hi Antikon,

Actually, I would argue that the previous behaviour was wrong! You note that the other columns couldn't be sorted (and probably not filtered either) - which is wrong, and probably unexpected behaviour for the development. I think with the new interaction, DataTables is doing stronger checking, and therefore catching this particular configuration error. I don't really see any advantage to not showing this error (unless I'm missing something!).

Having said that, I do acknowledge that it is a bit annoying sometimes to know in advance exactly how many columns are in the table. One way around this might be to define your array before hand:

[code]
var a = [];
a[1] = {...};
[/code]
for example. But I'll have a think about how this might be improved in future.

Edit - actually - that's probably no good either. scrap that :-). The .length property would not give what is expected. perhaps var a = array( 5 ); would... but then you know the number of columns! I'll keep thinking...

Regards,
Allan

Antikon

Ok, I will create aoColumns array on the fly.

Regards,
Antikon

pthaden

Just a +1 for sbabych's solution for IE:

An extra comma after the last entry in my "aoColumns" array was provoking my error message (but only in Internet Explorer):

DataTables warning: Unexpected number of TD elements. Expected 280 and got 336. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination.

Removing the errant comma from the aoColumns {} brackets solved the problem. A warning to those who copy/pasted column options like I did...

What a great plug-in, and a great forum to support it! Thanks!

joejoe

Thanks pthaden. Met with the same problem in IE6 and solved it by removing the redundant comma at the end of the aoColumns.

zoggy

I ran into this problem also due defining the amount of columns in aoColumns vs the amount on the page changing.
In my case when logging into the page there is an additional column which then causes this error to be thrown.
If I add the extra line it works when logged in, but when logging out it throws the error due to too many columns.

Oh well, easy fix is to use php/asp to run a quick test to see if logged in, if so - echo out the extra column needed in aoColumns, else it doesn't show up.

allan

I'm looking at ways to improve this situation in DataTables 1.7 - http://datatables.net/forums/comments.php?DiscussionID=1486 - if anyone has any suggestions, please feel free to add them. Although I won't be able to do anything about the extra comma! That is simply invalid Javascript :-)

Regards,
Allan

jcornelius

This may be the overly simple solution. You must define the sort option for each column in the table. The example code provides for 5 columns (null, null, null, null, null on line 4 in the code below, usually found around line 39 in the same code provided on http://www.datatables.net/examples/api/row_details.html). You will need to make sure there is one null value for each column in your table.

[code]
oTable = $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null, null, null, null, null
],
"aaSorting": [[1, 'asc']]
});
[/code]

jascissom

I'm having this problem as well, but it seems to be for a different reason. I get the same error in IE but I'm not sure why. Removing the "," at the end removes the error but makes the DataTables stop working. My code is as follows:

[code]



ProductID
Volume
Product Name
Status




#ProductID#


Subscription

#ProductVolume#


#ProductName#
#status#




[/code]

[code]
oTable = $('#productsTable').dataTable({
"aaSorting": [[ 1, "asc" ]],
"aoColumns": [
{"bSearchable": true, "bSortable": true},
{"bSearchable": true, "bSortable": true},
{"bSearchable": true, "bSortable": true},
{"bSearchable": true, "bSortable": true},
],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
[/code]

Any help would be greatly appreciated.

allan

The comma after the last "{"bSearchable": true, "bSortable": true}," makes the code not valid. Try removing it.

Allan