Datatables: 'bAutoWidth: false' not working when 'sScrollY' is set
Datatables: 'bAutoWidth: false' not working when 'sScrollY' is set
jsrjaput
Posts: 4Questions: 0Answers: 0
I am using datatables to reformat the already existing table/DOM after page load. I have defined the column widths in percentages in thead
[code]
GroupName
Grouped By
Count
Download
....
[/code]
JQuery code looks like this.
[code]
oTable = jq("#myTable").dataTable(
{
"bSort" : false,
"bLengthChange" : false,
"bJQueryUI" : true,
"bPaginate" : false,
"sScrollY": "200px",
"bAutoWidth": false // Disable the auto width calculation
}).rowGrouping(
{
bExpandableGrouping : true //group by first column
});
[/code]
Issue is - When sScrolly is set, datatables calculates width automatically and sets equal width for all columns which it shouldn't be doing as bAutoWidth is set to false. On disabling it, columns widths are appropriately set as per percentages. Any suggestions on how to make it work?
Thanks
[code]
GroupName
Grouped By
Count
Download
....
[/code]
JQuery code looks like this.
[code]
oTable = jq("#myTable").dataTable(
{
"bSort" : false,
"bLengthChange" : false,
"bJQueryUI" : true,
"bPaginate" : false,
"sScrollY": "200px",
"bAutoWidth": false // Disable the auto width calculation
}).rowGrouping(
{
bExpandableGrouping : true //group by first column
});
[/code]
Issue is - When sScrolly is set, datatables calculates width automatically and sets equal width for all columns which it shouldn't be doing as bAutoWidth is set to false. On disabling it, columns widths are appropriately set as per percentages. Any suggestions on how to make it work?
Thanks
This discussion has been closed.
Replies
Allan
I have created a test case on jsfiddle. http://jsfiddle.net/EysLd/
If I uncomment 'sScrollY' line, then column widths are set to default and does not follow percentages I have specified in html. I am using row grouping add on to group rows on basis of first column.
I'm not entirely sure what is causing this, but I will take a look tomorrow and see what I can discover.
Allan
I've just committed the fix: https://github.com/DataTables/DataTablesSrc/commit/41dc47b . Basically the fix is to read the `width` and / or `style` attributes of the column headers and apply them - otherwise we run into problems trying to remove previously calculate columns...
An updated fiddle is here: http://jsfiddle.net/EysLd/2/ .
And the DataTables with the fix: http://datatables.net/download/build/nightly/jquery.dataTables.js?_=11 (the `_=11` is just an anti cache, since that resource is cached by CloudFlare...).
Allan
An updated fiddle is here: http://jsfiddle.net/EysLd/2/ .
[/quote]
Is it just me or does anyone else see that the header widths of the table do not resize correctly when dragging the sizer bar to make the table wider/narrower? I see it in both Chrome and IE 10
fnAdjustColumnSizing or `columns.adjust()` in 1.10 can be used to fix that: http://jsfiddle.net/EysLd/3/ .
Having said that, I thought I'd put that into DataTables core... Need to check that out.
Allan
I notice that when [code]"bAutoWidth": false[/code] line is uncommented (bAutoWidth is set to false), it again starts calculating column width automatically while it should keep preserving the column widths specified in html. and if set to true, it preserves the widths. So kind of behaving opposite to as it should.
My issue is resolved since I can just remove 'bAutoWidth' line now but just in case if I understood the behavior above mentioned correctly and it's a bug.
Thanks again.
So what is happening is that the width is not being calculated automatically ('auto width' means that DataTables will compute a "worse case" table and read the widths from that). However, it is applying a pixel value to the column width, which makes it look like it is doing column width calculations - and what I assume you are referring to.
Unfortunately, this is required with scrolling enabled. Because the table is split into two (or three) parts, header and body (+footer optionally), the columns must have a value applied to them to align them correctly. A percentage value doesn't work there - it has to be a pixel value. So what DataTables does is that on each draw, it measures the body, applies it to the header, and to itself, to make the columns align correctly.
That's why it looks calculated - it is, but not 'auto width' in the sense of the DataTables parameter if it is disabled. There is no way around that I'm afraid - the columns simply will not align otherwise (and its hard enough making them align as it is - the border-collapse:collapse for example is simply impossible to get correct, since the browsers use the content of the body to calculate width, which the header table obviously doesn't have!
Column width alignment in tables is a nightmare...
Allan
Thanks again.