Fixed Columns with Server Side Processing - Columns overlapping?

CHewer

Hi All,

I've had DT working with left fixed columns for a while without any issues where the table has been loaded in full... i've now re-created the same table using server side processing/AJAX to reduce that initial loading time, but i'm now seeing rendering issues where the last fixed column, and the first 'floating' column overlap - on page 1 this isnt an issue, and it's not an issue on all pages (some of the pages are fine). On most 'broken' pages, the overlap is probably half a character being hidden on the 'floating' column, but on other broken pages i'd say up to 3 or 4 characters are covered - and you cant drag the scrollbar further left to see the data.

I've tried giving the columns minimum widths that exceed the size of any data in them, but that didnt help either...

Has anyone seen this before and know how to fix it?

Thanks for any help :)

Chris

CHewer

I should probably mention...

• The same thing happens in all browsers (at least IE11, Chrome and FF)
• If i open the page and then sort by column 2 (default sort is column 1) - the overlap occurs, if i change the code to sort by column 2 as the default, that same page of data loads without overlapping, suggesting it's a formatting issue on data it hasnt seen?

I've just noticed, if i sort by column 4, I actually see the heading of that column twice (overlapping)... Column 4 is named 'Project No.' - and it looks like this:

Project No. [sort icon] ect No. [sort icon]"

Thats the first time i've seen that happen, usually its:

Column4 [sort icon] olumn5 [sort icon]

CHewer

And I should also add FixedColumns, FixedHeader, Responsive and DataTables are all up-to-date! (the issue also existed when they were out of date, but an update hasnt fixed the issue).

glenderson

Have your tried to adjust() the columns? I needed to do that when columns were originally hidden or changed size between the time they were added to the dom vs when they were finally rendered.

$.fn.dataTable.tables({visible:true, api:true}).columns.adjust();

CHewer

Thanks for the response - No luck with that unfortunately - do any additional parameters need to be included or is it useable as you posted it?

Thanks

glenderson

It would have to happen after dataTables fully loads. I would put it in a click event to see if it does anything to start with. Could be that it's running before dataTable loads the ajax content.

allan

Are you able to link to a test case showing the issue please?

Allan

CHewer

Hi Allan,

Unfortunately not, it's internal only and linked to mssql etc, I can setup a teamviewer/webex session if that would help?

sek001

I may be experiencing a related issue with server-side processing and deferLoading. When the table initialises, there is a scrollbar overlapping the top left column header. Once the table is redrawn, it mostly disappears behind the table with just a bit of the top showing. The problem seems to be in <div class="DTFC_RightHeadWrapper" style="position:relative; top:0; left:0;"></div>. If I set the top property to "10px" in my browser's code inspector, the scrollbar disappears behind the table completely. However, I have been unable to do this dynamically before or after the table is drawn. Perhaps this is of some help?

Update: After some checking, I think the problem with DTFC_RightHeadWrapper is related to the Fixed Header extension, rather than too the fixed column issue. I've just discovered fixedHeader.headerOffset, which seems to have solved the problem.

MaRlik

I guess I got the same problem. Have a look here:
https://jsfiddle.net/MaRlik/zd7h731n/4/

I the div, with class .DTFC_LeftWrapper which seems to make the problmes. I tried to get the size of the first real column and reset the width of the fixed div and add 21 due to the padding. This is a workaround to fix the problem afterwards.

    var breite = $( "#example td" ).width();
    breite = breite + 21;
    $( ".DTFC_LeftWrapper" ).css("width",breite + "px");

The last problem is, to call this after the paging/sorting ist done. I can only get the events and callbacks which are fired before everything is done. Which is the latest callback/event after sorting and paging a table?

https://jsfiddle.net/MaRlik/zd7h731n/5/

CHewer

Allan took a quick look for me and suggested using this recent version of fixedColumns, which has fixed it for me...

FixedColumns: https://nightly.datatables.net/fixedcolumns/js/dataTables.fixedColumns.min.js
Commit info: https://github.com/DataTables/FixedColumns/commit/fb1241ef4f1a82a60645c52b0ed9dc868336e83f

allan

Updated fiddle with the latest nightly. This does indeed resolve the issue shown there.

Allan