Bug Fix for ColReorder Extension

awelch

There is a bug in the ColReorder Extension causing misalignment of the column insert points to their actual location. This causes the pointer (the indicator that shows where a column will be dropped) not to line up with the border between columns when a large number of columns are displayed (from my testing somewhere around 7+). I've created a JS Bin to show the behavior. In the example, the top table is displaying current behavior, the bottom table displays the behavior with my suggested fix. When you reorder the columns to the far right you will notice that the pointer does not line up properly with the column borders in the top table. You can see in the javascript that I have overriden the _fnRegions functions for the second table. Note the line:

//total += $(aoColumns[i].nTh).outerWidth();
total = $(aoColumns[i].nTh).offset().left;

outerWidth() is not accurate enough here as the width is rounded down (or up in some cases) for every column, losing precision on every iteration until it is off by full pixels. Getting the left offset will provide a more accurate location for the pointer.

awelch

Would a moderator please move this to the Bug Reports category?

awelch

I made a mistake. The total variable should be set to the right offset, not the left.

//total += $(aoColumns[i].nTh).outerWidth();
var header = $(aoColumns[i].nTh);
total = header.offset().left + header.outerWidth();

I've updated the JS Bin to reflect this change: live.datatables.net/feqepivo/7/edit