ColReorderWithResize with Fixed-Width table and header

benhannon

I'm not sure if this was mentioned/noticed anywhere but I noticed when using this add-on with
a fixed-width table, resizing columns would not permit the last column to line-up properly.
A quick fix to this issue is to add the following line of code in the ColReorderWithResize.js
right after line 1030.

BEFORE:
[code]
//Update the internal storage of the table's width (in case we changed it because the user resized some column and scrollX was enabled
if(scrollXEnabled && $('div.dataTables_scrollHead', this.s.dt.nTableWrapper) != undefined){
if($('div.dataTables_scrollHead', this.s.dt.nTableWrapper).length > 0)
{
this.table_size = $($('div.dataTables_scrollHead', this.s.dt.nTableWrapper)[0].childNodes[0].childNodes[0]).width();
}
}
[/code]
AFTER:

[code]
//Update the internal storage of the table's width (in case we changed it because the user resized some column and scrollX was enabled
if(scrollXEnabled && $('div.dataTables_scrollHead', this.s.dt.nTableWrapper) != undefined){
if($('div.dataTables_scrollHead', this.s.dt.nTableWrapper).length > 0)
{
this.table_size = $($('div.dataTables_scrollHead', this.s.dt.nTableWrapper)[0].childNodes[0].childNodes[0]).width();

//BRH 9-19-2013
//Make sure to update the scrollHeadInner as well!
$('div.dataTables_scrollHeadInner', this.s.dt.nTableWrapper).width(this.table_size);
}
}
[/code]

This updates the dataTables_scrollHeadInner class div with the new table width to keep the last column lined up properly with the last data column. I suspect this issue came from me having to force styles on the div.dataTables_scroll and div.dataTables_scrollHead elements to
to fix and issue with the table stretching its width beyond my page layout:

[code]
"fnInitComplete" : function(oSettings, json){
$(".dataTables_scroll").addClass("oh_table");
$(".dataTables_scrollHead").addClass("oh_table").css("width", "");
},
[/code]

Ben Hannon