bAutoWidth with column without width
bAutoWidth with column without width
I think I found a small bug into the "_fnCalculateColumnWidths" function
l.3479 :
[code]
iTmpWidth = $(oHeaders[i]).width();
[/code]
this code return 0 if there are
- no width css property or if it set to "auto"
- and the table is invisible when it is call
The result is the TH width is set to 0.
The problem with this is, in Firefox and IE when all the columns width are set in the "TH", the remaining available space is redistributed to all the columns . In Chrome the space is redistributed to the columns which have no width or width to 0.
[code]
.hide {
display: none;
}
.col1 {
width:100px;
}
.col2 {
width:auto;
text-color:green;
}
Month
Savings
Savings
January
$100
$100
February
$80
$80
$('#example').dataTable({
"aoColumns": [
{ "sClass" : "col1" },
{ "sClass" : "col2" },
{ "sClass" : "col2" }
]
,
"bAutoWidth" : true,
});
$(document).ready(function($) {
$('#root').fadeIn();
});
[/code]
I found some workarounds actually
- set bAutoWidth to false
- modify jquery.dataTables.js
[code]
l.2504
<< if ( oSettings.aoColumns[i].sWidth !== null )
--
>> if ( oSettings.aoColumns[i].sWidth !== null && oSettings.aoColumns[i].sWidth != "0px" )
[/code]
- have the table visible at start.
Of course this is a sample my data are load in background that's why my table is hidden, I doesn't like any of these solutions.
l.3479 :
[code]
iTmpWidth = $(oHeaders[i]).width();
[/code]
this code return 0 if there are
- no width css property or if it set to "auto"
- and the table is invisible when it is call
The result is the TH width is set to 0.
The problem with this is, in Firefox and IE when all the columns width are set in the "TH", the remaining available space is redistributed to all the columns . In Chrome the space is redistributed to the columns which have no width or width to 0.
[code]
.hide {
display: none;
}
.col1 {
width:100px;
}
.col2 {
width:auto;
text-color:green;
}
Month
Savings
Savings
January
$100
$100
February
$80
$80
$('#example').dataTable({
"aoColumns": [
{ "sClass" : "col1" },
{ "sClass" : "col2" },
{ "sClass" : "col2" }
]
,
"bAutoWidth" : true,
});
$(document).ready(function($) {
$('#root').fadeIn();
});
[/code]
I found some workarounds actually
- set bAutoWidth to false
- modify jquery.dataTables.js
[code]
l.2504
<< if ( oSettings.aoColumns[i].sWidth !== null )
--
>> if ( oSettings.aoColumns[i].sWidth !== null && oSettings.aoColumns[i].sWidth != "0px" )
[/code]
- have the table visible at start.
Of course this is a sample my data are load in background that's why my table is hidden, I doesn't like any of these solutions.
This discussion has been closed.
Replies
Thanks very much for the pull request on Github with this ( https://github.com/DataTables/DataTables/pull/71 ).
Before modifying the DataTables core, I wonder if you could try calling fnAdjustColumnSizing once the table is made visible? The reason I'm not sure about the patch is that it will effectively ignore the sWidth that has been passed (and then calculated to be 0 - it needs to be recalculated).
One other thing to watch out for with hidden tables, is that it will seriously effect performance in IE6-8 (not sure about 9). It does something crazy with the DOM that makes initialisation exceptionally slow.
Would be interested to know how you get on with fnAdjustColumnSizing .
Thanks,
Allan
As I wrote in my first message , I don't like the fix, so I try another approach , I make another pull request If you could take a look.
Thanks.