Row details header column not appearing

davidwesst

Hi there,

I have been working on implementing the showing and hiding row details example (http://www.datatables.net/release-datatables/examples/api/row_details.html), but taking a step further by having the ability to add and remove rows dynamically. As it stands, I have the functionality to add row/remove rows and the new rows have an "expand" button that shows the details for the row.

The problem I'm having is the "expand" header column, as I can't get it to add for some reason.

Here is the code I use to initialize the table:
[code]
// add expand column
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

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

$('#example tbody tr').each(function() {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
$(this).find("img").bind('click', CCGAWizard.StepScript.onRowExpand);
});
[/code]

...the code that is executed when I add a row is:
[code]
// collapse all rows
$('#example tbody tr').each(function() {
var imgElem = $(this).find("img").get(0);
if(imgElem) {
imgElem.src = site.getRootURL() + "Content/Images/expand.png";
CCGAWizard.StepScript.TableElem.fnClose(this);
}
});

// add expand column
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

// add it
CCGAWizard.StepScript.TableElem.fnAddData(jsonObj);

$('#relatedProducerTable thead tr').each(function() {
this.insertBefore(nCloneTh, this.childNodes[0]);
});

$('#relatedProducerTable tbody tr:last').each(function() {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
$(this).find("img").bind('click', CCGAWizard.StepScript.onRowExpand);
});

Any thoughts on why the extra header column isn't appearing?
[/code]

fbas

Data Tables (in some cases only? or all?) makes a copy of your table header, so it can separate the tbody from the thead (since the tbody can be made scrollable while the thead is in place).

so likely when you are cloning the TH, you're doing it in the original header (which has been made invisible) but not to the copy of the header.

best solution would be to make the column before calling .dataTable(). Is there any reason the extra column is not simply just set in HTML?

davidwesst

That was the problem. I somehow missed that after staring at the HTML in my debug tools for a few hours.

I also ended up cloning the nCloneTh element too, and all appears to be working as expected.

Thanks again!

allan

> Data Tables (in some cases only? or all?) makes a copy of your table header

Only when scrolling (sScrollX or sScrollY) is enabled. When used without scrolling DataTables will keep the table as one single / full element (one possible disadvantage of enabling scrolling this - it adds complexity!).

Allan

nickschurch

I'm having the same problem.... davidwest, could you post an example of cloning the nCloneTh element to solve it?

ok, so I've tried replacing

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

with

[code]
$('#relatedProducerTable thead tr').each(function() {
this.insertBefore(nCloneTh.cloneNode( true ), this.childNodes[0]);
});
[/code]

and that kind-of works, but now I have two table headers, one with the extra row, and one without.