FixedColumns + Column width calculation

jrevai

Hi,

I have the following table definition:

$(document).ready(function () {
var oTable = $('#example').dataTable({
"bDeferRender": true,
"bAutoWidth": false,
"bProcessing": true,
"sAjaxSource": '@Url.Action( "GetJsonData", "Home" )',
"sAjaxDataProp": "",
"sScrollY": "auto",
"sScrollX": "100%",
"sScrollXInner": "1400px",
"aoColumnDefs": [
{ "sWidth": "50px",
"bSortable": false,
"fnRender": function (oObj, val) {
return "";
},
"aTargets": [0]
},
{ "sWidth": "200px", "aTargets": [1] },
{ "sWidth": "300px", "aTargets": [2] },
{ "sWidth": "100px", "aTargets": [3] },
{ "sWidth": "100px", "aTargets": [4] },
{ "sWidth": "200px", "aTargets": [5] },
{ "sWidth": "200px", "aTargets": [6] },
{ "sWidth": "100px", "aTargets": [7] },
],
"iDisplayLength": 100,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"sDom": 'R<"dataTables_HeaderWrapper"<"H"lfr>><"dataTables_BodyWrapper"t><"dataTables_FooterWrapper"<"F"ip>>',
"oColReorder": {
"iFixedColumns": 2,
"iFixedByFixedColumnsPlugin" : 2
}
});

new FixedColumns(oTable, {
"iLeftColumns": 2,
"iLeftWidth": 300
})

});

As you can see, all column widths are set, bAutoWidth false, I use ajax datasource and I have to fixed columns on the left.
What I see that the first fixed column that's rendered has set style="width:1327px" where 1327px is the width of the entire table. What I found, that during the rendering the _fnConstruct method of the FixedColumn plugin runs. The first iWidth value that is pushed into the that.s.aiOuterWidths array is 1327. $('tbody>tr:eq(0)>td', this.s.dt.nTable) returns a single cell, with colspan = "8" and the text Loading...

$('tbody>tr:eq(0)>td', this.s.dt.nTable).each( function (i) {
// Inner width is used to assign widths to cells
that.s.aiInnerWidths.push( $(this).width() );

// Outer width is used to calculate the container
iWidth = $(this).outerWidth();
that.s.aiOuterWidths.push( iWidth );

if ( i < that.s.iLeftColumns )
{
iLeftWidth += iWidth;
}
if ( that.s.iTableColumns-that.s.iRightColumns <= i )
{
iRightWidth += iWidth;
}
} );

So the first fixed column's width will be calculated based on the Loading cell's with.
If I replace the above code with this:

$('thead>tr:eq(0)>th', this.s.dt.nTable).each( function (i) {
...
} );

column width's will be calculated correctly. I had this issue with FixedColumns.js version 2.0.3 and with the latest nightly build as well.

Could you please check if this is a bug? It might be, that I initialized the table wrong.

Thank you,
Judit

allan

Can you link use to a test page showing the problem please.

Allan

jrevai

Hi Allan,

I tried to create a jsfiddle for this, but I couldn't get jsfiddle to get the jsondata from somewhere.
However my problem is already visible on this screen:

http://jsfiddle.net/jrevai/XnnYK/8/

The first checkbox column has a really big style width set if you inspect it with your browsers dev toolbar, I'm using safari. If you put a breakpoint to the FixedColumns.nightly.js file's 407th line inside the above mentioned $('tbody>tr:eq(0)>td', this.s.dt.nTable).each( function (i) {, and hit refresh,
when the breakpoint is hit, take a closer look at the $(this), you'll see it's a tablecell, and it's outerHTML: Loading....
The width of the first cell will be calculated based on the with of this cell.

Could you please take a look at it?

Thank You,
Judit