SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Fixed Header and First Column in Table

    Hello

    I have a table like this

    Code:
    <div class="container">
    <table id="table1">
    <thead>
    <tr><th></th><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
    </table>
    </div>
    This is just an example. Actually the table has around 100 columns and over 200 rows. Hence, I tried using various jquery scripts like fixedheadertable, datables, fixedtable and so on. Without jquery the page takes just a few seconds to load. But as soon as I add the jquery script to fix the header and column, the page usually times out (a popup opens which says the script is taking too long to load) or page has become unresponsive and so on.

    Is there some script which could do the same thing fast in a few seconds without loading the page too much?

    Thanks
    Last edited by jaagare; Apr 24, 2013 at 03:23. Reason: forgotten to close the <tr>
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    How are you including jQuery in your page?
    Are you using a CDN?
    Could you post the exact code?

    I know this sounds unrelated, but it could be causing a timeout.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I tried using a CDN as well as local jquery script and the issue occurs in both.

    The above code is the exact code its just that it has more columns and has data in it. Like I mentioned it has around 100 columns and over 200 rows.

    Also I tried including the jquery in the header <head> as well as before </body>. The page itself loads very fast but once the jquery script to fix header or column is added the page slows down.
    Secondly I also noted, that if I fix only the header then it takes around 30-40 seconds to load and loads fine but slow. But if I fix both header and first column then the page becomes unresponsive.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by jaagare View Post
    I tried using a CDN as well as local jquery script and the issue occurs in both.
    Oh, ok.
    It's just that sometimes people include jQuery like this (leaving out the http):

    HTML Code:
    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    and that won't work locally.
    Shame! That would have been too easy.

    Quote Originally Posted by jaagare View Post
    The above code is the exact code its just that it has more columns and has data in it. Like I mentioned it has around 100 columns and over 200 rows.

    Also I tried including the jquery in the header <head> as well as before </body>. The page itself loads very fast but once the jquery script to fix header or column is added the page slows down.
    Secondly I also noted, that if I fix only the header then it takes around 30-40 seconds to load and loads fine but slow. But if I fix both header and first column then the page becomes unresponsive.
    It's a bit hard (for me at least) to imagine why this might be so slow based on the code you have posted.
    I used datatables before and never found it slow at all.
    Would it be possible to post a link to your page, so I could have a look.

  5. #5
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ok let me try setting up a demo page for this purpose. Basically, like I mentioned earlier, when I use datables with fixed header script it works fine, but as soon as I make a fixed header as well as 1 column as fixed, it becomes unresponsive. Same is the case with other scripts that I have mentioned like fixedheadertable & fixedtable. I guess as there are too many columns and rows its slowing things, because I just checked the size of page generated and its 1.5MB as there are close to 200 columns and 200 rows so thats a lot and it loads fast without any jquery but once I add the jquery for fix header it only slows down a bit and loads in around 30 seconds and page doesnot become unresponsive but as soon as I make column fixed, it simply stops loading and after say may be around 3-5 minutes if I say continue waiting the script does complete the action, but time taken is huge.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jaagare View Post
    it simply stops loading and after say may be around 3-5 minutes if I say continue waiting the script does complete the action, but time taken is huge.
    I doubt that the javascript code will be the direct cause, but it can result in css repaint situations, or dom handling issues, or a variety of other situations.

    This is where using timeline and profiling techniques can help to discover precisely what is the cause of the slowdown. There can be a variety of potential solutions, depending on what it is that is resulting in the slowdown.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    If the table wasn't displayed until after it was reorganised - that would help to speed things up.

    But the only way to really tell what is slowing it down is to get metrics from a web browser that loads a test page that can demonstrate the problem. Can you please provide a link to a test page so that we can troubleshoot what's causing the actual problem, and thus arrive at a working solution for you?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ok I have created a short demo over here
    Code:
    http://www.jaagare.com/fixtable/demotest.html
    This has similar amount of data so if you see once the page loads and the script starts to work its magic - it slows down the page and says unresponsive and popups up js continue or stop script press continue and after that the script would work. But I would not like that the page literally freezes the screen which should not happen.

    Any help is appreciated
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Howdy,

    So, I have been playing with this for a couple of hours now.
    Unfortunately, like you, every plugin I tried, choked and died when dealing with such a large table.
    The closest I came to getting it to work, was using the fixedheadertable plugin, which seems to be the most configurable.
    I tried Paul's suggestion of hiding the table, then using the create event (fired when the table is created) to display it again.
    This sped things up, but annoyingly, I couldn't get the table to re-render correctly.

    BTW, you had a couple of syntax errors in your markup around line 20,017 (for anyone else who might have a look at this).

    Sorry I couldn't help more.

    Also, it's a known issue: https://github.com/markmalek/Fixed-H...able/issues/34

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    And as a minor improvement, here's a tiny jQuery plugin that I've just put together, that lets you "do stuff" to things while they're hidden.

    Code javascript:
    (function ($) {
        $.fn.whileHidden = function (func) {
            this.hide();
            func.apply(this);
            this.show();
     
        };
    }(jQuery));

    It then lets your code be more expressive, so that you can write the following:

    Code javascript:
    $('#myTable05').whileHidden(function () {
        this.fixedHeaderTable({fixedColumns: 1});
    });

    Does anyone have ideas for a better name though, than whileHidden ?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Wow, that's pretty cool, Paul. Nice one!
    I have no idea what I was doing wrong last night, but a similar approach was resulting in load times of 40 to 50 seconds for me.
    I had another look at it this morning, when I downloaded the fixedheadertable plugin afresh, copied the OP's original table into the plugin's demo page, applied the changes you suggest and now I get:

    Code:
    6 requests  ❘  180 B transferred  ❘  263 ms (onload: 3.96 s, DOMContentLoaded: 3.97 s)
    Sweet!

    Quote Originally Posted by paul_wilkins View Post
    Does anyone have ideas for a better name though, than whileHidden ?
    Not really.

    Edit: I just noticed that if I do all of the above, the table at first appears with horizontal and vertical scrollbars (as is correct), but after a couple of seconds, the horizontal scrollbars disappear. Are you getting the same problem?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    A simple change results in a 5 times speed improvement.

    I saved the page and the files that it needs to a local environment, to help reduce bandwidth interference when comparing times.

    The timeline on the unchanged page shows that it takes on average 5.1 seconds for the fixed header & columns to take place.
    Hiding the table beforehand, and then showing it afterwards, improves that to an average of 1.1 seconds.

    From 5.1 down to 1.1 seconds, for the fixedHeaderTable function to do its work. That's a pretty fine improvement.

    Code javascript:
    $('#myTable05')
        .hide()
        .fixedHeaderTable({ fixedColumns: 1 })
        .show();

    The main cause of that reduction is due to layout and repaint recalculations that the web browser has to do when moving things around to create the the fixed column.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul @paul_wilkins very much for the solution. Yes it does improve the performance and now the page loads pretty fast.

    But as mentioned by @Pullo
    I just noticed that if I do all of the above, the table at first appears with horizontal and vertical scrollbars (as is correct), but after a couple of seconds, the horizontal scrollbars disappear. Are you getting the same problem?
    I too find that issue only vertical scrolling works. To fix this issue what I have done is made the fht-fixed-body and fht-tbody classes in defaultTheme.css with max-height:350 (as I have outer height as 400px) Now both scroll bars show up fine.

    Thanks a ton for helping me out and I shall now implement it on the actual code and see how it performs.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  14. #14
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Fails in IE older versions - 7 / 8 etc.

    Ok after finally testing across multiple platforms and feedback from people using it I am told that this does not work on IE older versions (mostly IE7/8) not tested on IE6. I too checked and it simply freezes the screen on the older IE versions and at most times we need to force close IE by going in to Task Manager.

    Is it related to the script or the amount of data on the page? If so is there a workaround for older browsers?
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  15. #15
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    311
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ok I think I have found the issue. Will do some more testing, but basically looks like if I use jquery minified it does not work but as soon as I switch to the regular jquery it works fine.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •