I found this experimental fixed table that does nothing else, but sort of has this fixed thing working cross-browser...
http://www.dotnetoutsource.com/Download/jQuery_FixedTable/jQuery_FixedTable_Demo.htm
If anything can be gleaned from it that is applicable to datatables, then great. I'm guessing that the structure is so different that it may not be useful though.
Thanks for the link - quite interesting how it's been done, and while fairly different from DataTables it's interesting to see how it has been done. I think the author is encountered some of the same problems that I've been seeing. Specifically there are a number of things which are happening across the browsers:
- Sub-pixel rounding - the issue with Firefox is how it rounds sub-pixel measurements (or rather the real issue is that all the browsers do it differently!). So if a cell is calculated with a height of 18.1777px, it is actually drawn as 19px. The way around this is to set the original table row's height to it's own height, which in doing so effectively casts the number as an integer.
- Outer height - as expected IE6 was applying the higher as an inner height, so adding the padding. What I've done is to assume that all cells have the same padding and based a calculation on that (height - paddingTop - paddingBottom). Interestingly Safari seems to be doing the same thing.
I've committed this now, so perhaps yo could give it a bash and say how you get on: http://github.com/DataTables/FixedColumns/blob/master/media/js/FixedColumns.js
I've tried this on: IE6, IE7, IE8, Safari 5, Firefox 3.6, Opera 10.60 and Chrome 6. Each with it's own quirks, but I think I've coded around them now...
As I understand to provide customized controls which are not into the table but in some other Div's I need to use JS API functions like fnFilter for example. But I cant found the function which get the data about total founded records. Is there such function?
Or maybe is it possible to call out of the table some controllers like search panel or total counting rows or pagination by some id with own customized css class?
And one more thing. Is it possible to hardcoded set the with of columns? because if I try to do it by width parameter into th tag - it's not working
here - http://213.108.45.42:88/reports/matchedproducts/ How is better to do? With JS API only?
Hi Allan:
Thanks for your work on this. I am still seeing height issues in IE6, but have not yet determined whether it is because I am doing something incorrectly in terms of table setup/css. I am also seeing an issue in Firefox where the fixed header column only covers about 90% of the header vertical space, so scrolling shows the other rows underneath. But again, I have a lot of extra stuff in my integration and need to setup a more stripped down example using your example files before I can verify. Thanks!
@wjshohs - Maybe I am not understanding correctly, but it sure seems like you are hijacking the crap out of this thread. No? :)
@David: It's a daft question, but are you sure IE is seeing the new version, rather than a cached version of FixedColumns? It seems to work okay on my basic examples, but I didn't try anything more complex that putting in line breaks.
@ wjshohs: I've moved your question to here http://datatables.net/forums/comments.php?DiscussionID=2899 , so this discussion can stay on topic.
I'm loving this plugin! But, when the thead has multiple tr element the fixed column only applies to the first tr. Is there a fix for this?
Also, I was wondering if you have a method for swithing all features (sorting, filtering, pagination) to behave as a horizontonal table instead of vertical. Instead of each row being an item each column in the the table is an item. I realize this might be a huge plugin in itself, but I thought I would throw it out there as you seem like quite the master of jquery Allan!
1. Have you tried using the version in GitHub linked to above? That should allow multiple TR elements
2. Heh - thanks for the compliment, but I'm afraid that this is not currently something that DataTables does. It's very much rows and columns based, and would require a significant amount of work to abstract that out. To the point of "omg..." :-). Interesting idea though!
I heard somewhere you were playing around with using position:fixed on your FixedColumns and would like to get that code if possible. I understand it's not supported/working with IE6 but that's not a problem for me, how awesome is that?!
I don't believe position: fixed with work for this particular case, since 'fixed' is relative to the screen, not a parent object. As such, if you were to scroll the screen, then the floating column would still be floating around on the screen (unless of course it's position is updated, but then you are as well using absolute positioning). So I'm afraid, I don't see how position: fixed would actually help here.
Hi Allan:
I have put together a small example that will hopefully help in diagnosing a few browser issues. I am running into the following issues, the most worrisome of which is IE8...
IE8
-----------
Adding a border to TD's located in the tbody seems to throw off the vertical spacing between the cloned TDs and the corresponding tbody TD's. The following example works fine in IE8 using your example CSS file...
http://baldwindavid.github.com/datatables_test/no-border.html
However, adding a border to TD's seems to be the culprit in throwing off the spacing in this example...
http://baldwindavid.github.com/datatables_test/index.html
Firefox
-----------
Looking at these same examples in Firefox, you can see that the fixed TH does not match the height of the regular thead TH's. Thus, when you scroll horizontally, you can see a piece of the headers below. Of course in my example the backgrounds are transparent, but you can see that the cloned TH does not quite match up vertically.
IE6 & 7
-----------
The same vertical spacing issues are present, but I'm guessing the fix is different for these browsers than IE8. The fixed footer TH also seems to be slightly off, but darn close.
Note: The example repo is located at...
http://github.com/baldwindavid/datatables_test
Thanks very much for putting up the examples - they will be really useful! Can I just check that you are using IE8 in "super-standards" mode, or in compatibility? I suspect that this is just an inner v outer height issue, but I will look into it and let you know what I find.
Thanks for that. Could you give the version of FixedColumns that I've just committed to git a go please. It should resolve the issues that you were seeing:
http://github.com/DataTables/FixedColumns/blob/master/media/js/FixedColumns.js
Hi Allan:
It is looking pretty good now. However, in IE8 the header seems to no longer support rowspans. You can see this in the example...
http://baldwindavid.github.com/datatables_test/
Thanks for spotting that. I can't think off the top of my bead why that would be, and I'm on the move atthe moment, so can't check into it for a little while (should be able to later on today). I'll get back to you :-)
I just downloaded 1.0.1.dev version, it works much better than 1.0.0
However, there is a problem with more than one fixed columns, e.g. 5, the header fixed for 5 columns, but body fixed for only 1 column
The other thing is, the plug-in will not work if table is hidden when init. DataTables asked to call oTable.fnAdjustColumnSizing() after the table is showing. Could fixedcolumns plug in hook-up to that function and adjust itself too?
1. Interesting. It seems to be fixing two columns no problem for me - although perhaps I'm missing something. Can you put up an example? Also I've just noticed that if the fixed columns take up more width than is visible, then slightly odd things happen to the scrolling (probably not unexpected since you'll never get to see the non-fixed columns though!).
2. I've just tired the following code with the dev version of DataTables and FixedColumns and it appears to be working okay:
[code]
$(document).ready( function () {
document.getElementById('demo').style.display = "none";
var oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true
} );
new FixedColumns( oTable );
document.getElementById('demo').style.display = "block";
$('#example').dataTable().fnAdjustColumnSizing();
} );
[/code]
Again, could you possibly put up an example?
I applied here http://213.108.45.42:88/reports/matchedproducts/ fixed with 2 columns but
1) Why do they have transparent layer?
2) Whey have wrong width
also I found that after i add width parameter there - after datatable generate table - it changes width into the style. and this is more priore for html. how could I turn off width into the style for cells and thead?
Your plugin is really really useful. Thanks a ton. I was a looking for this script from past 3months but i couldn't get one. I have few questions on the example you have posted on http://baldwindavid.github.com/datatables_test/.
1). When i am doing a horizontal scroll, why the locked column flickers.(jerking effect) in FF|IE-6|7|8. But on chrome the scrolling is very smooth. Can you please look into this.
On the flickering scrolling, I've noticed that the fixed column only flickers when scrolling horizontally if you're using vertical scrolling. If you're using pagination and no vertical scrolling there's no flickering.
The other thing I've noticed, which is perhaps related to this, is that when you're using fixed columns and vertical scrolling, you don't get the nice blue line down the column boundaries to give you feedback as to where you're about to drop a column being moved - whereas you do when you're using paging.
One more thing I've noticed, which again may possibly be related to this, is that the "Processing ..." message doesn't appear during sorting when you're using scrolling - only if you're using paging. (Actually that's not 100% correct: it doesn't appear either if you're using paging and have the show length set to -1.)
> when you're using fixed columns and vertical scrolling, you don't get the nice blue line down the column boundaries to give you feedback as to where you're about to drop a column being moved
Is that when using ColReorder? I'll look into that.
For the processing message - are you using server-side processing? Or just regular sorting. How long does the sort take?
Replies
Allan
I found this experimental fixed table that does nothing else, but sort of has this fixed thing working cross-browser...
http://www.dotnetoutsource.com/Download/jQuery_FixedTable/jQuery_FixedTable_Demo.htm
If anything can be gleaned from it that is applicable to datatables, then great. I'm guessing that the structure is so different that it may not be useful though.
Best regards,
David Baldwin
Thanks for the link - quite interesting how it's been done, and while fairly different from DataTables it's interesting to see how it has been done. I think the author is encountered some of the same problems that I've been seeing. Specifically there are a number of things which are happening across the browsers:
- Sub-pixel rounding - the issue with Firefox is how it rounds sub-pixel measurements (or rather the real issue is that all the browsers do it differently!). So if a cell is calculated with a height of 18.1777px, it is actually drawn as 19px. The way around this is to set the original table row's height to it's own height, which in doing so effectively casts the number as an integer.
- Outer height - as expected IE6 was applying the higher as an inner height, so adding the padding. What I've done is to assume that all cells have the same padding and based a calculation on that (height - paddingTop - paddingBottom). Interestingly Safari seems to be doing the same thing.
I've committed this now, so perhaps yo could give it a bash and say how you get on: http://github.com/DataTables/FixedColumns/blob/master/media/js/FixedColumns.js
I've tried this on: IE6, IE7, IE8, Safari 5, Firefox 3.6, Opera 10.60 and Chrome 6. Each with it's own quirks, but I think I've coded around them now...
Regards,
Allan
As I understand to provide customized controls which are not into the table but in some other Div's I need to use JS API functions like fnFilter for example. But I cant found the function which get the data about total founded records. Is there such function?
Or maybe is it possible to call out of the table some controllers like search panel or total counting rows or pagination by some id with own customized css class?
And one more thing. Is it possible to hardcoded set the with of columns? because if I try to do it by width parameter into th tag - it's not working
here - http://213.108.45.42:88/reports/matchedproducts/ How is better to do? With JS API only?
Thanks for your work on this. I am still seeing height issues in IE6, but have not yet determined whether it is because I am doing something incorrectly in terms of table setup/css. I am also seeing an issue in Firefox where the fixed header column only covers about 90% of the header vertical space, so scrolling shows the other rows underneath. But again, I have a lot of extra stuff in my integration and need to setup a more stripped down example using your example files before I can verify. Thanks!
@wjshohs - Maybe I am not understanding correctly, but it sure seems like you are hijacking the crap out of this thread. No? :)
@ wjshohs: I've moved your question to here http://datatables.net/forums/comments.php?DiscussionID=2899 , so this discussion can stay on topic.
Allan
Also, I was wondering if you have a method for swithing all features (sorting, filtering, pagination) to behave as a horizontonal table instead of vertical. Instead of each row being an item each column in the the table is an item. I realize this might be a huge plugin in itself, but I thought I would throw it out there as you seem like quite the master of jquery Allan!
cheers,
Eric Bailey
1. Have you tried using the version in GitHub linked to above? That should allow multiple TR elements
2. Heh - thanks for the compliment, but I'm afraid that this is not currently something that DataTables does. It's very much rows and columns based, and would require a significant amount of work to abstract that out. To the point of "omg..." :-). Interesting idea though!
Allan
I heard somewhere you were playing around with using position:fixed on your FixedColumns and would like to get that code if possible. I understand it's not supported/working with IE6 but that's not a problem for me, how awesome is that?!
Thanks,
Jeff
I don't believe position: fixed with work for this particular case, since 'fixed' is relative to the screen, not a parent object. As such, if you were to scroll the screen, then the floating column would still be floating around on the screen (unless of course it's position is updated, but then you are as well using absolute positioning). So I'm afraid, I don't see how position: fixed would actually help here.
Regards,
Allan
I have put together a small example that will hopefully help in diagnosing a few browser issues. I am running into the following issues, the most worrisome of which is IE8...
IE8
-----------
Adding a border to TD's located in the tbody seems to throw off the vertical spacing between the cloned TDs and the corresponding tbody TD's. The following example works fine in IE8 using your example CSS file...
http://baldwindavid.github.com/datatables_test/no-border.html
However, adding a border to TD's seems to be the culprit in throwing off the spacing in this example...
http://baldwindavid.github.com/datatables_test/index.html
Firefox
-----------
Looking at these same examples in Firefox, you can see that the fixed TH does not match the height of the regular thead TH's. Thus, when you scroll horizontally, you can see a piece of the headers below. Of course in my example the backgrounds are transparent, but you can see that the cloned TH does not quite match up vertically.
IE6 & 7
-----------
The same vertical spacing issues are present, but I'm guessing the fix is different for these browsers than IE8. The fixed footer TH also seems to be slightly off, but darn close.
Note: The example repo is located at...
http://github.com/baldwindavid/datatables_test
Best Regards,
David Baldwin
Thanks very much for putting up the examples - they will be really useful! Can I just check that you are using IE8 in "super-standards" mode, or in compatibility? I suspect that this is just an inner v outer height issue, but I will look into it and let you know what I find.
Thanks,
Allan
Yes, I was in super-standards mode, but just to be sure I put up another example with the meta tag that forces this mode...
[code][/code]
This example is located here...
http://baldwindavid.github.com/datatables_test/super-standards.html
Best Regards,
David Baldwin
Thanks for that. Could you give the version of FixedColumns that I've just committed to git a go please. It should resolve the issues that you were seeing:
http://github.com/DataTables/FixedColumns/blob/master/media/js/FixedColumns.js
Regards,
Allan
It is looking pretty good now. However, in IE8 the header seems to no longer support rowspans. You can see this in the example...
http://baldwindavid.github.com/datatables_test/
Best Regards,
David Baldwin
Thanks for spotting that. I can't think off the top of my bead why that would be, and I'm on the move atthe moment, so can't check into it for a little while (should be able to later on today). I'll get back to you :-)
Allan
I've committed a fix that should do the trick for you. You can grab it from github, or from the new downloads page: http://datatables.net/download/ .
Allan
However, there is a problem with more than one fixed columns, e.g. 5, the header fixed for 5 columns, but body fixed for only 1 column
The other thing is, the plug-in will not work if table is hidden when init. DataTables asked to call oTable.fnAdjustColumnSizing() after the table is showing. Could fixedcolumns plug in hook-up to that function and adjust itself too?
1. Interesting. It seems to be fixing two columns no problem for me - although perhaps I'm missing something. Can you put up an example? Also I've just noticed that if the fixed columns take up more width than is visible, then slightly odd things happen to the scrolling (probably not unexpected since you'll never get to see the non-fixed columns though!).
2. I've just tired the following code with the dev version of DataTables and FixedColumns and it appears to be working okay:
[code]
$(document).ready( function () {
document.getElementById('demo').style.display = "none";
var oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true
} );
new FixedColumns( oTable );
document.getElementById('demo').style.display = "block";
$('#example').dataTable().fnAdjustColumnSizing();
} );
[/code]
Again, could you possibly put up an example?
Allan
1) Why do they have transparent layer?
2) Whey have wrong width
For the widths - first suggestion is to upgrade to the latest release, rather than 1.7.0 which is a little out of date now.
Allan
also please answer there - http://datatables.net/forums/comments.php?DiscussionID=2899
Your plugin is really really useful. Thanks a ton. I was a looking for this script from past 3months but i couldn't get one. I have few questions on the example you have posted on http://baldwindavid.github.com/datatables_test/.
1). When i am doing a horizontal scroll, why the locked column flickers.(jerking effect) in FF|IE-6|7|8. But on chrome the scrolling is very smooth. Can you please look into this.
2). How do i freeze more than 2 cols.
Campbell
Allan
The other thing I've noticed, which is perhaps related to this, is that when you're using fixed columns and vertical scrolling, you don't get the nice blue line down the column boundaries to give you feedback as to where you're about to drop a column being moved - whereas you do when you're using paging.
Campbell
Campbell
Is that when using ColReorder? I'll look into that.
For the processing message - are you using server-side processing? Or just regular sorting. How long does the sort take?
Allan