server-side, scrollX, and column-sizing

dkeeney

I've been working with DataTables, scrollX, and server-side data sourcing, and have hit a couple of obstacles. The basic symptom is that the column headers do not align with the data columns, and in chasing that down, I learned....

1) The column-sizing gets done before the first data is loaded, so can't actually base size on data cell size. Calling .fnAdjustColumnSizing() after data loading would seem to correct this, but it is not obvious where to hook the method call. Putting the call in the callback of fnServerData seems to cause repeated calls to fnServerData. I put it in a test-and-set once-only block, but I am not sure that is optimal.

2) When the columns do get sized, the size of the header label does not seem to be included in the calculation, so if it is larger than the data, the header th is oversized, compared to the data.

The demo site is at: http://bb.noservercoding.net

DataTables has, otherwise, been wonderful to work with, and I keep finding more and more handy features. The scrollX feature was a relief to find, as the alternatives I could think of were difficult. Thank you.

allan

1. If you are doing a table create, then fnInitComplete is the best place to put it. If you are using fnReloadAjax or similar, then the callback function from that plug-in would be best. However, I think this is probably something DataTables should be doing by default, and I'll be looking at that from 1.10.

2. I don't quite understand I'm afraid - this sounds contradictory. A longer label makes the column wider, but isn't included in the column width calculation? The alignment looks correct to me on your test page. Is it not working in your browser?

Allan

dkeeney

Allan:

Thank you for your prompt response this Monday morning.

I'll try to clarify the second point.

The leftmost column in the table has a sequence of 2 digit numbers, and the column name lahmanid.

The data column formats to about 54 pixels wide, but the column header, with the word 'lahmanid' and a 2 em right padding for the sort arrows, is 99 pixels wide. DataTables calculates the column width as 63 pixels wide, and adds a 'style="width:63"' attribute to the TH element, but the column header still displays as 99 pixels wide, because the size of the TH content requires it.

My suggestion was to include the column label in the column maximum-field-width calculator, so the column is wide enough for the column label.

demo http://bb.noservercoding.net/index1.html
img http://bb.noservercoding.net/dt_pic.png

Thank you again.
David

dkeeney

Once the column width is wide enough to accommodate the column title, the data column itself would need to be sized in css/html as well.

allan

It looks like there is a discrepancy between the browsers.

In Safari it works very nicely for me - the table cells are 'border-box' sized, so the total width of the lament (98px in my browser) is made up from 8px left padding, 62px content width and 28px right padding. Because it is a border box, the 62px is correctly applied when taking into account the padding.

In Chrome however, it looks like in your screenshot.

Darn browsers... I'll need to look into what is causing this. Thanks for the demo.

Allan