Column widths change while paging or sorting?

ascendant

Hello,

I recently got started with DataTables- loving it so far, but I’ve come upon an issue where column widths will resize as I page through or sort results. So, it seems to be occurring as a result of different sizes of content in the cells- however, it happens even when there is more than enough room to accommodate all the values of all the cells. Is there any way to prevent this behavior?

I can’t post the original, so I “saved as” the page in Firefox and uploaded that- the same issue occurs, so you can see it in action here: http://www.luminousvictus.com/datatablestest/jitteryColumns.html - note that when paging or sorting, column widths will change by a few pixels. Also, my DataTables debug code is “idiket”.

Ideally, I don’t want to get rid of the automatic column sizing, I just want to find a way for that sizing to not change as a result of sorting or paging.

Thanks,
Chris

allan

I get about a 1px shift in the columns when looking at your example (thanks for that!) in Safari or Firefox.

I'm afraid I'm not 100% certain what is causing this - DataTables is giving the table column widths which don't change, so the browser's table layout method is deciding to alter the column widths for some reason - normally this is due to large content, but that doesn't appear to be the case in this table, so I suspect I'm feeding it a miscalculated column somewhere.

I can use table-layout: fixed in Webkit to get the layout perfect, but that doesn't appear to be working in Firefox, so I'm afraid that this one is going to require some additional investigation. I will post back when I've had a chance to dig deeper.

Allan

ascendant

Hi Allan,

Thank you for your speedy response, and I greatly appreciate your taking the time to look into this.

Based on your response, it sounded like it the issue wasn't necessarily something obvious like calling some method incorrectly, so I did some more investigation of my own. What I did was make a copy of the "Load from JS Array" example page (http://datatables.net/release-datatables/examples/data_sources/js_array.html) and gradually add in my own code, starting with the table data, then column defs etc., until the jitters started appearing.

What seemed to make the difference was in the number and titles of columns. Have a look at these two examples:

http://luminousvictus.com/datatablestest/yes_jitters.html
http://luminousvictus.com/datatablestest/no_jitters.html

On Win7 FF/Chrome, sorting/paging on yes_jitters.html causes a 1 pixel column width jitter; sorting pages on no_jitters does not. There's only one difference between these two files:

In no_jitters.html, in the aoColumnDefs array:
[code] {"sTitle":"MMM","aTargets":[4]},[/code]
In yes_jitters.html:
[code]{"sTitle":"MMMM","aTargets":[4]}, [/code]

In other words, if I add one more character to the sTitle, those jitters start happening on page/sort. If I add still more characters to the title, or add more columns, column widths begin to jitter by more pixels. If I use less characters, or remove columns, column widths still do not change on sort/page. (If you're not getting the jitter on yes_jitters.html try http://luminousvictus.com/datatablestest/yes_jitters2.html which sets the sTitle as "MMMMMMMMMMMM" and you should see it jitter quite a bit there)

Please let me know if you have any thoughts about this. As you mention, the content isn't particularly large as yet, but what I want to do with this is add a lot of columns with fairly narrow content, mostly <7 digit integers. Ideally these jitters would just never happen, but at least it would be good to know where the "limit" is before it'll start to happen.

Chris

allan

Hi Chris,

I'm not sure we'll ever be able to determine an exact limit at which point the jitter will occur since each rendering each is going to do this slightly differently, and the content in each table will be slightly different.

The way DataTables' width handling works is that it constructs a "worst case" table by finding the longest strings for each column. It will then draw that on screen, with custom widths applied and read the widths of the columns (i.e. we use the browser's own layout algorithm rather than reinventing one).

Now the biggest flaw in this is that DataTables uses the string length of items to find the longest one and font's are rarely mono-spaced. Therefore we end up with the situation where "iiii" is "longer" than "mmm" although the latter is wider.

I did once (around 1.5 beta) have a version of DataTables which put the text into DOM elements and read their width, and that was almost perfect, but it utterly killed performance in IE, and large tables in other browsers stalled as well.

The "work around" is to use sContentPadding and set it to "mmm" or similar, to force longer strings in the worst case table. `aTargets: [ '_all' ]` can be used to apply it to all columns.

So that's why the calculations from DataTables are not perfect, but having experimented a bit with your table, I am slightly surprised that this is going wrong, since the worst case table actually looks okay. I'm slightly concerned that there might be an innerWidth / outerWidth issue going on here, and that's the tack my investigation will (at least initially) take.

Allan

ascendant

Hi Allan,

While I was investigating another issue that cropped up (posted here: http://www.datatables.net/forums/discussion/11393/mdata-as-a-function-doesn039t-appear-to-work-with-js-array-as-data-source#Item_1) I noticed that when I created the exact same DataTable via HTML and a JS array, the column widths would be different.

The only difference between
http://luminousvictus.com/datatablestest/DataTables-1.9.3/TABLEdata-NOmdata.html
and
http://luminousvictus.com/datatablestest/DataTables-1.9.3/JSdata-NOmdata.html
is that the former has the data in the HTML table, while the latter has the data in a JS array. So I would expect that the two would render identically, however this doesn't appear to be the case; in both Win7/FF and Win7/Chrome, the HTML source version has the "Name" column twice as long as the "Salary" column, whereas the JS sourced version has them being exactly the same size. (Neither specifies any column widths, or otherwise adjusts defaults as far as sizing.)

Is this expected behavior, or do you know why this might be occurring? The reason I'm posting it into this thread, is because I'm wondering whether the original "jittery Columns" I'm using might be related to using a JS array as source, and perhaps there are other potential issues out there from arising from JS as source, and if in general perhaps using HTML as a source might currently be preferable to JS source, all other things being equal.

Thanks,
Chris

ascendant

Quick update- I decided to go ahead and rewrite my server-side parser to output an HTML table rather than a JavaScript array to act as the data source for DataTables.

And now... no more column width jitters! (And the mData functions are now working as well.) It seems to have taken care of all the issues I was having with DataTables, and now it feels solid as a rock, and I'm happy as a clam. Basically, it seems like switching from JS data source to an HTML data source did solve all my problems.

I appreciate your prompt feedback about the issue, I don't think I'd have thought to try switching to HTML if I was on my own.