Multiple thead rows with column headers last?

wps

Does DataTables support multiple rows in the THEAD? The documentation/examples indicate that it supports row and column spans in the THEAD but does not mention independent rows. Through testing, I have confirmed that it works to have multiple rows in the THEAD but only if the row that contains the column headers comes first.

I want the row with the column headers to come last, as I am trying to implement per-column sorting with the sort fields above the column headers (instead of in the tfoot as shown in one of the examples).

When the row with the column headers is not first, DataTables pukes, even though I have followed the requirements that there only be one TH per column. Is there any way to get around this? I have tried rendering the page with the column headers row first and then rearranging them with javascript afterwards but that makes everything in tbody disappear.

To illustrate, this works:

[code]



ID
Name
Email








[/code]

…but this does not:

[code]








ID
Name
Email



[/code]

I want the later.

allan

Hi wps,

I've just committed a fix for this issue into the main DataTables distribution, and it will be released as part of 1.5.2, which is coming very shortly. Basically the problem was that my unique TH detection algorithm wasn't taking TD elements into account. It does now, so they can be mixed and matched as needed.

Regards,
Allan

doug_hale_jr

Was this implemented with version 1.5.2? I currently am using 1.5.3 and I get a length error if I include extra thead rows?

Thanks
Doug

allan

Hi Doug,

It should be fixed... :-). Could you provide an example that is breaking for you?

Thanks,
Allan

DaveyDaveDave

Hi,

Sorry to resurrect an old post, but I think I might have found a related issue. Apologies if I've missed an obvious solution, but I haven't seen anything in the examples or FAQ.

Basically, I have the same basic set-up as the OP here - a THEAD with two rows, and the actual THs in the second row:

[code]








Time
Task
User
Note


[/code]

This works fine, until I try to hide my fourth row (Note):

[code]
var notesTable = $('#notes-table')
.dataTable(
{
"aoColumnDefs" : [{
"bVisible" : false,
"aTargets" : [ 3 ]
}]
});
[/code]

If I try this, I get the following error (versions 1.7.5 and 1.7.6):

[code]
Error: nTh.parentNode is null
Source File: file:///C:/projects/Misc/style/js/jquery.dataTables.js
Line: 2908
[/code]

If I don't hide the column, it works fine, and if I put the actual column headings (THs) above my filter boxes (TDs), it also works fine.

Many thanks.

allan

Interesting! Funnily enough I've just finished (like 5 minutes ago :-) ) completely rewriting how column visibility is handled for the header and footer in DataTables. Couple you possibly give the latest nightly ( http://datatables.net/download ) a go and see if this resolves the issue for you please?

Thanks,
Allan

DaveyDaveDave

Thanks Allan, the problem certainly does go away with 1.8.

I presume, if you're talking about a complete re-write, then it's not something you'd put into a patch of 1.7? If that's the case (and apologies if I've missed an FAQ-type answer), do you have a target date for releasing 1.8 stable?

My guess is that we'd just stick with having the THs before the TDs and then there's no problem.

Thanks very much for the very quick response - much appreciated!

allan

Yup it's a rewrite of the header and footer handling basically, so not something that would really be suitable to back port (apart from anything else, this is one of the main reasons for calling the next version a major release :-) ). I hope to have a beta of 1.8 available in the next two weeks, and then a release in the following two weeks after that. There are one or two unknowns still though, so that's flexible. Good to hear that did the trick for you!

Allan

Rizzi

Hi..
I have also problems with multiple rows in thead. i use the same construct the others here do.

[code]












 












 


[/code]

[code]
var oTable = $("table#company").dataTable({
"bAutoWidth": false,
"aaSorting": [ [2,'asc'] ],
"aoColumns": [
{ "sWidth": "70" },
{ "sWidth": "50" },
{ "sWidth": "187" },
{ "sWidth": "115" },
{ "sWidth": "45" },
{ "sWidth": "130" },
{ "sWidth": "115" },
{ "sWidth": "120" },
{ "sWidth": "115" },
{ "sWidth": "70" },
{ "sWidth": "18", "bSortable": false }
],
"sScrollY": "640",
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bJQueryUI": true,
"bProcessing": true,
"sDom": 'rt',
"fnInitComplete" : function() {
this.fnAdjustColumnSizing();
this.fnDraw();
}
});
[/code]

the width for the input and select boxes is set to 100% per css.

i use 1.8.0.dev and jquery 1.5.2 with ui 1.8.11.
if i remove the input and select boxes and only leave the tr with the th, the table go also crazy


EDIT: for info: i use many tables in jquery tabs on each tabs change they get new initialized with "fresh" table from server as dom table.
greets Rizzi

Rizzi

hi..

i think its an css issues in my code.. i have to test some..
tell u the result later..

greets Rizzi

Rizzi

ok..
some issues in my css code, but the column width doesn't fit with den width i set in the parameters if i change view per jquery tabs..

don't know to fix it :(

greets rizzi

Rizzi

ok.. i have last night change from 1.8.0dev to 1.7.6 an forgott it this morning :(

with 1.8.0dev the content table column width fits right.. but the header table doesn't. and i have the thead twice!

http://s1.directupload.net/file/d/2492/2swcfslq_png.htm


aLayout is undefined
for ( i=0, iLen=aLayout.length ; i

Rizzi

Hi,

i found the issues. Version 1.7.6 works fine for me, the initialize process call to fast after tab change, it was in a $(document).ready() call inside the tab content. but this seams to be a bad place for it.
call inside the document ready event a function 10 milliseconds later with setTimeout, all works fine!

hope this helps someone. 1.7.6 ist multirow per thead ready! both ways!

greets rizzi

allan

Yup - 1.8 dev doesn't support complex headers and scrolling at the same time yet - that's tonights development job... :-). There are a couple of little other issues as well - I'll try and get it passing all unit tests again shortly.

Allan

yvsong

This is a wonderful tool.

My table head is similar to the 1st example in this thread -- 1st row is the column headers and 2nd row the input elements. It works in 1.7.6. After upgrading to 1.8.0, clicking the 2nd row sorts the table, but does not allow user inputs. Both rows are essentially treated the same. Is it a bug?

allan

See the bSortCellsTop section here: http://datatables.net/upgrade/1.8 :-). Just set bSortCellsTop to true to get the old 1.7.x behaviour.

Allan

belserv

We have a situation where some columns have a single heading cell and others have a double cell. But I can only click on the lower of the double cells to change the sort at run-time and not on the single one. I'd like to be able to sort all columns. Consider this brief example:

FirstGroup
SecondThird

.(three cells per row)

I would like to be able to click on the words First, Second, or Third (but not Group), to be able to sort. I have tried combinations of bSortCellsTop and can only sort by clicking on Second or Third but not First.
We're using v 1.8.2. How can I get this to work?