FixedColumns: New plug-in for DataTables - fix columns when scrolling - Page 2

FixedColumns: New plug-in for DataTables - fix columns when scrolling

2

Replies

  • allanallan Posts: 23,220Questions: 0Answers: 622
    I'll have a look at this shortly with IE6 and see if it can be sorted - wonder if jQuery will set one set the outerHeight...

    Allan
  • baldwindavidbaldwindavid Posts: 14Questions: 0Answers: 0
    Yeah, IE6 is company mandated unfortunately.

    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
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi David,

    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
  • wjshohswjshohs Posts: 29Questions: 0Answers: 0
    edited September 2010
    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?
  • wjshohswjshohs Posts: 29Questions: 0Answers: 0
    edited September 2010
  • baldwindavidbaldwindavid Posts: 14Questions: 0Answers: 0
    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? :)
  • allanallan Posts: 23,220Questions: 0Answers: 622
    @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.

    Allan
  • BaileyBailey Posts: 1Questions: 0Answers: 0
    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!

    cheers,
    Eric Bailey
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi Eric,

    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
  • jamillerjamiller Posts: 27Questions: 0Answers: 0
    Hey 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
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi 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
  • baldwindavidbaldwindavid Posts: 14Questions: 0Answers: 0
    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

    Best Regards,
    David Baldwin
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi David,

    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
  • baldwindavidbaldwindavid Posts: 14Questions: 0Answers: 0
    Hi 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...
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    This example is located here...
    http://baldwindavid.github.com/datatables_test/super-standards.html

    Best Regards,
    David Baldwin
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi David,

    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
  • baldwindavidbaldwindavid Posts: 14Questions: 0Answers: 0
    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/

    Best Regards,
    David Baldwin
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi David,

    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
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi David,

    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
  • lyiu18lyiu18 Posts: 2Questions: 0Answers: 0
    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?
  • allanallan Posts: 23,220Questions: 0Answers: 622
    Hi lyiu18,

    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:

    $(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(); } ); Again, could you possibly put up an example?

    Allan
  • wjshohswjshohs Posts: 29Questions: 0Answers: 0
    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
  • allanallan Posts: 23,220Questions: 0Answers: 622
    The transparency is simply because they have a transparent background :-). Just add a background-color using CSS to remove that.

    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
  • wjshohswjshohs Posts: 29Questions: 0Answers: 0
    The transparency I fixed. I updated 1.7.4 - but the bug staied about wrong width

    also please answer there - http://datatables.net/forums/comments.php?DiscussionID=2899
  • wjshohswjshohs Posts: 29Questions: 0Answers: 0
    also I found that after i add width parameter there <th width="20"> - 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?
  • pixelfxpixelfx Posts: 10Questions: 0Answers: 0
    Hi Allan,

    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.
  • greenflashgreenflash Posts: 27Questions: 0Answers: 0
    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.

    Campbell
  • allanallan Posts: 23,220Questions: 0Answers: 622
    An update coming soon which will address this... :-)

    Allan
  • greenflashgreenflash Posts: 27Questions: 0Answers: 0
    Good news! Thanks.

    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
  • greenflashgreenflash Posts: 27Questions: 0Answers: 0
    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.)

    Campbell
  • allanallan Posts: 23,220Questions: 0Answers: 622
    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?

    Allan
This discussion has been closed.