Trying to use fixedColumn but for somereason it wont work at all.

netameta

I've tried using fixed columns the past 2-4 hours (just the basic example from http://datatables.net/release-datatables/extras/FixedColumns/index.html

I've also set a fiddle up at:http://jsfiddle.net/6JSnQ/1/

but for some reason this error keep popping.

Thanks

netameta

Anyone ?

allan

Thank you for the test case. use the dev version of FixedColumns at it will work: http://jsfiddle.net/6JSnQ/2/ .

Note that you must also use border-collapse: separate; for FixedColumns table. Otherwise the column width calculations simply don't add up and it is impossible to correctly align the tables.

Finally, don't use sScrollXInner. Just let the table make its own sizing calculations.

Allan

netameta

allan Thanks for your response,

This semi-works however if you'll try scrolling you'll see at a certain part of the left side you wont be able to click on the slider, the reason for that is there seem to be some issue with the dable not splatting and instead of a 1 table for fixed columns to the left(with no scroll) 1 table to the right with scroll. it looks like the scroll spread across the whole thing.


I made another fiddle - alot cleaner then the first one:
http://jsfiddle.net/RMgQh/

I get this error "TypeError: that.s.dt.oApi._fnGetTdNodes is not a function" when i run it.

and "TypeError: oClone.body.parentNode is null" when i try sorting

Any idea why ?

netameta

Would love a resolution on that. i am pretty much stuck.

netameta

Anyone ?

netameta

So now I've tried fixedcolumns on my website, most of the errors i mentioned above don't exists.

What i still have trouble with is: the horizonal scrolling is still all over the table not only for the scrollable(right) side, while half of the scroll bar that's located on the left side is unclickable. also vertical scrolling goes extremely slow if done by mouse wheel, the whole table xScroll x seemed messed up and columns dont align at all

No console errors though.
You can see the site at: http://steveshepherd.e-ddl.com/dashboard/ it loads slow - very weak and slow server so..

I also have debug information at: http://debug.datatables.net/atecog - which i just found out about extremely impressive !.

Thanks in advanced.

allan

Sorry for the delay in replying. As noted else where in the forum, I've been traveling for the week.

For your JS fiddle, the issue is that the version of FixedColumns pointed to is old: http://jsfiddle.net/RMgQh/2/ (this is an error on my downloads page, I'm aware of and going to fix later on).

> What i still have trouble with is: the horizonal scrolling is still all over the table not only for the scrollable(right) side

This is intentional and how FixedColumns 2.5 operates. It is different form 2.0.

Can you try the latest FixedColumns on your site please?

Allan

netameta

Thanks extreme allan.
Using 2.0.3 fixed the scrolling issue its now only on the right side. However columns are still completely miss aligned.

What's weird is they are also miss aligned with fix columns.

netameta

mistake

allan

I've just downloaded your site to work on some changes to get it to work as expected. This is what I've done:

1. Use DataTables 1.10 dev - http://datatables.net/download/build/nightly/jquery.dataTables.js

2. Use FixedColumns 2.5.0 dev - http://datatables.net/download/build/dataTables.fixedColumns.nightly.js

3. Put DataTables before the FixedColumns include in your HTML

4. Remove the `border-collapse: collapse !important;` from the CSS

5. Add this to the CSS:

[code]
table.dataTable,
table.dataTable th,
table.dataTable td {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
[/code]

This will all be a little bit easier when I get a chance to release this software, since its all working, but not yet released!

Allan

netameta

Allan Thanks very much its looks pretty sweet - i wish i could get rid of the border-collapese:separate; however i understand its a must

there's still an issue with the mouse wheel scroll , is there anything to do to fix that?

allan

This is how I deal with the border-collapse issue in the new DataTables CSS: https://github.com/DataTables/DataTablesSrc/blob/master/css/jquery.dataTables.scss#L162 .

> there's still an issue with the mouse wheel scroll , is there anything to do to fix that?

Not sure what is causing the performance killer then I'm afraid. I need to look into that.

Allan

netameta

Allan thanks again.

Does it work correctly on other tables ?(like not on my site) i mean i created another fiddle and seems its also scroll slow.

off top of your head do you remember where round the code is the scrolling ? i mean if you have it bound maybe i can trigger that bind several times for each time if that make sense.

allan

Yes - its just using border-left etc to basically simulate border-collapse.

> off top of your head do you remember where round the code is the scrolling ?

This is the scroll event: https://github.com/DataTables/FixedColumns/blob/master/media/js/dataTables.fixedColumns.js#L454

Allan

netameta

This error seem to happened not only on my site its also happening on other I've tried like 4 examples now. so I've started investigating a little.

The reason for that is you bind scroll even to change another node's scroll. meanwhile the second node also has the same bind to the first node. so you kinda create a paradox if you know what i mean.

[code]
$(that.dom.grid.left.liner).on( 'scroll.DTFC', function () {
that.dom.scroller.scrollTop = that.dom.grid.left.liner.scrollTop;
if ( that.s.iRightColumns > 0 )
{
that.dom.grid.right.liner.scrollTop = that.dom.grid.left.liner.scrollTop;
}
} );

$(that.dom.grid.right.liner).on( 'scroll.DTFC', function () {
that.dom.scroller.scrollTop = that.dom.grid.right.liner.scrollTop;
if ( that.s.iLeftColumns > 0 )
{
that.dom.grid.left.liner.scrollTop = that.dom.grid.right.liner.scrollTop;
}
} );
[/code]

I wrote a simple fix (well workaround more then a fix i guess - still in fiddle will try implementing it)

http://jsfiddle.net/q8xL3/7/

if anyone could look at it let me know if it could work would be nice.

allan

Urgh yes - a dual binding like that would cause serious performance issues. I'll look into how best to fix it in FixedColumns and post back here.

Allan

netameta

Allan I've found a much better solution i am not sure of which scope to add the variable but here it is:

The idea: http://jsfiddle.net/q8xL3/12/

The implementation:
[code]

/* variable to check state */
var ignoreEvent = false;

// When the body is scrolled - scroll the left and right columns
$(this.dom.scroller).on( 'scroll.DTFC', function () {
var ignore = ignoreEvent;
ignoreEvent = false
if (!ignore) {
ignoreEvent = true;
if ( that.s.iLeftColumns > 0 )
{
that.dom.grid.left.liner.scrollTop = that.dom.scroller.scrollTop;
}
if ( that.s.iRightColumns > 0 )
{
that.dom.grid.right.liner.scrollTop = that.dom.scroller.scrollTop;
}
}
});


if ( that.s.iLeftColumns > 0 )
{
// When scrolling the left column, scroll the body and right column
$(that.dom.grid.left.liner).on( 'scroll.DTFC', function () {
var ignore = ignoreEvent;
ignoreEvent = false
if (!ignore) {
ignoreEvent = true;
that.dom.scroller.scrollTop = that.dom.grid.left.liner.scrollTop;
if ( that.s.iRightColumns > 0 )
{
that.dom.grid.right.liner.scrollTop = that.dom.grid.left.liner.scrollTop;
}
}
});

// When x-scrolling in the fixed column(s) we need to pass that information on
// to the tables body, since otherwise we just swallow that information
// TODO - This is far from perfect - how can be be improved?
$(that.dom.grid.left.liner).on( "mousewheel.DTFC", function(e) {
var xDelta = e.originalEvent.wheelDeltaX / 3;
that.dom.scroller.scrollLeft -= xDelta;
} );
}

if ( that.s.iRightColumns > 0 )
{
$(that.dom.grid.right.liner).on( 'scroll.DTFC', function () {
var ignore = ignoreEvent;
ignoreEvent = false
if (!ignore) {
ignoreEvent = true;
that.dom.scroller.scrollTop = that.dom.grid.right.liner.scrollTop;
if ( that.s.iLeftColumns > 0 )
{
that.dom.grid.left.liner.scrollTop = that.dom.grid.right.liner.scrollTop;
}
}
});

// Adjust the body for x-scrolling
$(that.dom.grid.right.liner).on( "mousewheel.DTFC", function(e) {
var xDelta = e.originalEvent.wheelDeltaX / 3;
that.dom.scroller.scrollLeft -= xDelta;
} );
}
[/code]


hope that get closer to a good solution.

netameta

allen found any solution for that yet ?

allan

Not yet. Hoping to do some work on the plug-ins in the next day or two.

Allan

jayell

I am still finding that fixedcolumns 2.50.dev references _fnGetTdNodes which is not in the API exposed from datatables 1.10.dev.
So I still get the original error. (BTW I am using jquery 1.10)

allan

It does, but it checks for the existence of the DataTables 1.10 method first: https://github.com/DataTables/FixedColumns/blob/master/media/js/dataTables.fixedColumns.js#L1035 .

Can you please link to a test case showing the problem.

Allan

jayell

Thanks Allan -- I didn't find that line in my version, so I checked the latest "nightly" and it was in there.
Updated my copy and its working!

--jason

netameta

Allan you want a working test example of what ? of the scroll bug ?

or ? i mean the scroll bug i had it on like 4 maybe 5 different fiddles.

allan

Test cases are always very welcome! However, I was referring to @jayell with that comment. I see the problem with the double scroll binding.

Allan

allan

Its taken a while, but I got there. I've committed a fix for the doubling binding performance issue: https://github.com/DataTables/FixedColumns/commit/fa64e151c .

I'll be releasing this as part of FixedColumns 2.5 tomorrow.

Thanks!
Allan