fnClearTable resets column head widths in 1.7.6

andyburke

I'm calling fnClearTable() to clear a table before re-adding data to it. Doing so seems to reset the column header widths. The columns that contain the data still seem to be properly sized, it's only the headers that get screwed up. I am using bJQueryUI = true.

Any help would be appreciated.

Gerardo

Are you using scrolling?

andyburke

Yes. Is there something I should be aware of in that case?

Gerardo

Try disabling it.

Scrolling code clones the TH row, and somehow uses only TD for width calculations.

Gerardo

andyburke

Disabling scrolling makes the column headers stay the correct width. However, that's not a reasonable solution for us.

So, the bug is apparently that fnClearTable() + bJQueryUI + scrolling = broken table header widths on redraw.

Is there a way I can fix this?

andyburke

Any word on this? Is this at least an acknowledged bug now?

allan

Can you possibly give us a link to your example which is going odd? I've just tried the following code:

[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": 200,
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
setTimeout( function () {
$('#example').dataTable().fnClearTable();
}, 2000);
} );
[/code]
The table is initially shown with a scrollbar, but then when the table is cleared, there is no scrollbar, so the columns are resized to take that into account. Another factor might be that the data you have in the table is forcing the column widths to be a certain size - when you then remove that data there is nothing to force the size other than the column titles, so it will use that information only.

Allan

Gerardo

Allan, is there any chance to, in the scrolling case, to

1) take in account the (visible) TH width when calculating TD/(hidden) TH width (to take the max), so there is no column narrower than its header.

2) Use the hidden TH calculated width (which is the same as the TDs) and assign them to the visible TH.

Would this work?

Thanks,
Gerardo

allan

I'm not sure why you would calculate the hidden column width at all? The column is hidden and therefore it's width is meaningless is it not? The way DataTables matches the column widths between the header and the body is to insert the header into the body table, which is then hidden dynamically and the widths from the reconstructed table copied to the header.

Allan

Gerardo

Not hidden columns, I mean the hidden (cloned) TH row.

I see. But the problem is those widths (visible TH row, data rows) do not match (in certain cases?)


Thanks,
Gerardo

allan

Yes there certainly cases when the columns do not correctly line up. The most common example of that is initialising the table in a hidden element. The browser doesn't calculate sizes for display: none elements, so if you when display the table the columns will look wrong. The API function fnAdjustColumnSizing is provided for that very reason. Another example of where it might happen is when you try to force the column width to be smaller than it is possible to fit the content into - DataTables should detect this and give a warning on the console.

Allan

Gerardo

I am using fnAdjustColumnSizing already (albeit with a false parameter to avoid circular references, calling from fnDrawCallback.

But it has no effect on the visible TH when there is a scrollbar.

andyburke

I am indeed drawing the table into a potentially hidden div. Is there a way I could call something to recalculate the header sizes when I display the div?

Gerardo

Could solve my issue with this, in an ugly manner.

Scenario:

I resize the table with width 0.

This resizes data columns correctly, but does not take headers into account.

At least one column has a header wider than the current size of the column, that makes all headers widths slightly different than data counterparts.

Solved this by adding 30px to the min width above, now headers and data widths match.

Hth,
Gerardo

andyburke

Hey, sorry to ping again, but this is really annoying. I'm still having issues when I render a table into a hidden div. I'd really like the header widths to match the columns below them. That just doesn't seem to happen if you render your table while the div is hidden.

Any chance that column headers could be redrawn when we draw entries so they match up?

davelhs03

I am also having the same issue. The table is inside a hidden div and when I clear the table with paragraphstable.fnClearTable() the header column enlarges with:

[code]
paragraphstable = $('#paragraphstable').dataTable( {
"bJQueryUI": true,
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"aoColumns": [ { "sType": "numeric" }, null,null,null,null,null ]
} );





ID
Paragraph Title
Paragraph Text






echo "
echo "" . $paragraph['id'] . "";
echo "" . $paragraph['title'] . "";
echo "" . $paragraph['text'] . "";
echo "copy";
echo "