Fixed Header and First Column in Table

JavaScript
1

Hello

I have a table like this

<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

2

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

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.

4

Oh, ok.
It’s just that sometimes people include jQuery like this (leaving out the http):

<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.

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

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?

6

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.

7

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.

8

Ok I have created a short demo over here

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

9

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-Header-Table/issues/34

10

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.


$('#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.

11

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.


(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:


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

Does anyone have ideas for a better name though, than whileHidden ?

12

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:

6 requests  &#10072;  180&#8201;B transferred  &#10072;  263&#8201;ms (onload: 3.96&#8201;s, DOMContentLoaded: 3.97&#8201;s)

Sweet!

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?

13

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.

14

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?

15

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.