fnAddData and fnRender screws things up royally

bidon

I'm using what everyone on this site seems to do, the same code nearly. I want to refresh the table and keep existing sort, pagination etc.

So I use fnReloadAjax, using the text everywhere on this site. It calls oSettings.fnServerData which calls that.oApi._fnAddData which then finally renders the data with fnRender (to format it the way I want). On FF, this all works as designed.

However, on IE/Chrome some columns (no idea which) the TDs with the data in them from fnRender get changed. The width of the TD and it's contents change to "auto" instead of their previous fixed with. Verified this in IE and FF.

So this width change, basically causes the columns to change widths in a very small, but bad way. Refresh often enough, and you can't see jack.

Any idea how to fix this? Because I'd hate to ditch the table having spent all this time. However, unfortunately, we still live in a world with IE as the target browser. This seems like an issue with the table itself.

allan

Can you give us a link to the page with the issue please? I suspect what might be happening is that on first load the column width algorithm is different from the one being used later on (this unfortunately is necessary since not he first draw the widths can simply be read from the original table, but later that table no longer exists in its original state, so a different method is used). What you can do to always force the second method is to add an sWidth parameter to a single column.

Allan

bidon

That probably isn't possible. Is there some other information I can send?

allan

Not really - I'd need to see it in action to have a chance of figuring out what is going on :-).

Did you try adding sWidth to a column as I suggested?

Allan

bidon

I'm fairly certain I use sWidth everywhere, I'd have to confirm. But fnRender seems to have problems for whatever reason.

I totally get it, I'm trying to minimize/isolate the problem so I can send some offline files that you can look at.

More to come...

bidon

I could probably send an offline version, but after some massive work I've narrowed it down further.

TABLE
{
border-collapse: collapse;
}

If above is in a CSS file, somehow causes the issue. Remove it, it works fine.

Thoughts?

allan

Interesting - certainly collapsed browsers makes the width calculates DataTables does extremely difficult, if not out right impossible due to sub pixel rounding in the browsers (one of these days I'm going to get in tot he Webkit source and see what is actually happening when collapsed).

Until then, you might want to consider something like this which will give the same visual effect:

[code]
div.dataTables_wrapper table {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
div.dataTables_wrapper table th,
div.dataTables_wrapper table td {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: none;
}
div.dataTables_wrapper div.dataTables_scrollHead table {
border-bottom: none;
}
[/code]

See also this thread for more information: http://datatables.net/forums/discussion/9350/scrollable-datatable-header-is-not-alligned-with-data/p1#Item_4

Allan