Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~
https://mottie.github.io/tablesorter/docs/
2.61k stars 754 forks source link

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

Closed TheSin- closed 11 years ago

TheSin- commented 12 years ago

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();
                $('#togglebutton').val('Hide');
                showOrHide = true;
        } else {
                $('#table tr td:first-child').hide();
                $('#table tr th:first-child').hide();
                $('#togglebutton').val('Show');
                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 12 years ago

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 12 years ago

changing line 675 in jquery.tablesorter.widgets.js

from

firstCell = hdrCells.eq(0),

to

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 12 years ago

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 12 years ago

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 11 years ago

@TheSin-!

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 11 years ago

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 11 years ago

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?

[code] 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 URI: http://192.168.1.87/plugins/tablesorter/js/jquery.tablesorter.js [/code]

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

[code] $('#table').tablesorterPager({ container: $('#pager'), size: 200 }); [/code]

if I remove that the error in IE goes away.