Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

stickyHeaders don't work if you hide the first row #168

TheSin- opened this Issue Oct 30, 2012 · 7 comments


None yet
2 participants

TheSin- commented Oct 30, 2012

I haven't really dug deep into this yet, I have only one example currently.

But I have a table, and I have a col that I want to hide it's col0

here is the function I use.

function toggleCol() {
        if ( showOrHide == false ) {
                $('#table tr td:first-child').show();
                $('#table tr th:first-child').show();
                showOrHide = true;
        } else {
                $('#table tr td:first-child').hide();
                $('#table tr th:first-child').hide();
                showOrHide = false;

The odd part here is that when the Col is showing stickyHeaders works 100%, if the Col is hidden, they don't stick.
#1 I can't seem the think of why this would happen since I'm hiding a single col using the td/th, and not the tr, since stickyHeaders uses hide/show on the tr why would hiding the first td/th affect how it works at all?
#2 is there a way around this currently, maybe in the above function I could change something or make an update call to solve this?


TheSin- commented Oct 30, 2012

After a little testing it seems this is only an issue when it's the first col.

This being said the scroll height must be reliant on the cell instead of the row.

#1 Is there a specific reason for this? Browser compat?


TheSin- commented Oct 30, 2012

changing line 675 in jquery.tablesorter.widgets.js


firstCell = hdrCells.eq(0),


firstCell = header,

Solved this issue, but again why was the first cell used to start with? I dont' want to modify it without knowing if there was a reason to monitor the cell over the row in the first place.


Mottie commented Oct 30, 2012

The reason why the first cell is because an older version of the sticky header widget was using the first cell to find the table's offset position (left and top). The lastest version completely duplicates the thead but still uses the cell to find the position. I think I kept monitoring the cell position because of IE. So try changing that line to check the row position instead:

firstCell = hdrCells.eq(0).parent(),

TheSin- commented Oct 30, 2012

testing on safari and works. I'll test with firefox and IE shortly and report back. Thanks for the quick response and update on the reason it's much appreciated.


Mottie commented Nov 14, 2012


Any update on this? I was working on the next update and I'll include this change if it works properly in Firefox and IE.

Man, I need to set up a testing suite =/


TheSin- commented Nov 14, 2012

firefox is a go, still trying to get my hands on an IE machine, but I suspect it'll work. I got side tracked and forgot to test on IE ;) I'll try and get it done today.

BTW I made a new add-on for tablesorter called columnSelector, is there a place I can submit it?


TheSin- commented Nov 14, 2012

the fix is tested on IE8 and working.

Though I did find an other error I'm only getting in IE, any ideas where I can look for this one or what it might be?

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Wed, 14 Nov 2012 16:57:03 UTC

Message: 'row' is null or not an object
Line: 267
Char: 7
Code: 0

After a little more digging it seems to be related to the pager, in my page I have this pager code

container: $('#pager'),
size: 200

if I remove that the error in IE goes away.

@Mottie Mottie closed this in 839d5e2 Nov 14, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment