Enhance the Details Row example to include table footer

MikeS

Has anyone been able to take the detailed row API example (found here http://www.datatables.net/examples/api/row_details.html) and make it work with a table footer?

I thought it would be simple so I took the source for that example page and modified it as follows:

1) Added a footer to the HTML table definition just after the and before the closing tags.



 
Totals:
 
 
 



2) I ran this and the footer displays with the word "Totals" in bold centered under the "Rendering engine" column as expected. However, the black line that is drawn between the last row of the table and the footer is not correct. It does not extend fully across all columns like the header one does AND the black line under the header does not start from the column that contains the detail show/hide trigger.

Follow this link to see what I mean: http://img202.imageshack.us/img202/5900/captureugf.jpg

Should this not work as is?

MikeS

Has anyone given this a try? I can't believe that I'm the only one who's run into this problem. A footer row would seem to be a common thing to want to see in a table.

The missing lines shown in the photo is only the start of it. Once you try to actually put information into the footer row (like sums, min, max, avg. etc.) it gets worse. The data does not appear under the correct column!!

Ariazlol

Hey MikeS

It looks like you dont have the correct number of celles in your footer. This would explain the missing lines, as its set in the demo_table.css:

[code]
table.display thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
* cursor: hand;
}

table.display tfoot th {
padding: 3px 10px;
border-top: 1px solid black;
font-weight: bold;
}
[/code]

MikeS

Hi Ariazol,

First off, thank you for trying to assist. The API sample for the detail row has 5 columns defined in the and my does the same - 5 cells.

Further to my initial attempt, it looks like I need to insert a leading to the like the $(document).ready(function does for the header and body. However, when I do this using the following code copied from the original sample but changing thead to tfoot:

[code]
$('#example tfoot tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
[/code]

I get a, "Line: 2760 Error: 'aoColumns[...]' is null or not an object" message.

Being a noob at jQuery, I'd really appreciate it if anyone can take the API Detail Row sample and extend it to work with a table that contains both a header AND a footer. Seems like it should be a simple thing to do, but, what do I know?

Regards,
MikeS

allan

This this post help at all: http://datatables.net/forums/comments.php?DiscussionID=137#Item_6 .

Allan

MikeS

Hi Allan,

Thank you for pointing out my own thread :( You may now consider me an idiot.

allan

rotfl - no worries. I was sure that this had come up before... and indeed it had :-)

Allan