Scroller widget only sets width after window resize

[marcusklaas]

When running following code is run on a plain old tables, the width of the columns (neither header nor body) is not set. This happens only after a window resize. Until then, the header and body do not align.

$(window).load(function() {
    $.each($('table.tablelist'), function () {
        $(this).tablesorter({
            widgets: ['scroller'],
            widgetOptions: {
                scroller_height: 600
            }
        });
    });
});

I've browsed through the issues, but haven't found anything describing this. Am I doing something wrong, or could this be an issue with the scroller widget?

[Mottie]

Hi @marcusklaas!

Was this tested on the scroller widget from the master branch or the last release?

There are still some alignment issues with the last release version which hopefully have been fixed.

[ivanny]

I have the same issue too. I use master branch release.
Here you can see problem:
http://jsfiddle.net/4pgkL19s/1/
After many attempts, I tried to use this version, /! Widget: scroller - updated 5/17/2015 (v2.22.0) *// and everything goes ok, until I use filter: then headers no more aligned with tbody.
I hope you could solve this issue asap, thanks in advance.

[ivanny]

If I refresh after filter results, layout appears correctly, but the search become extremly slow and I lose filter parameter.
es:
.bind('filterEnd', function() {$('table').trigger('refreshWidgets', true);})

[Mottie]

Hi @ivanny!

When the refreshWidgets method is used, it removes the widget then re-initializes it. When this method is triggered using "filterEnd", the "filterEnd" event is fired immediately after "filterInit", so it's creating an endless loop.

It would be better to trigger $(window).resize() on "filterInit".

I'm working on a fix, but the scroller widget has been having lots of issues, especially cross-browser and will take more time to get these resolved. It has become my new nemesis... I must either tame it, or destroy it! MUWAAHAAAHAA... errr.

[ivanny]

Ahahah, great Mottie!
I appreciate a lot your effort, I hope you could win your (but also our) battle!
Anyway, I don't give up and I tried another stickyHeaders widget to achieve my aim (sort, scroll, filter).
Everything works as expected but...in IE the header flicker on-scroll, only in IE.
Do you think that this issue could be simplier to solve?
I'm ready to donate you to contribute to solve this issue. Thanks again so much!

[TheSin-]

there is no need to run sticky headers and scroller widgets, please just use one or the other, not both.

scroller = limited height of the table to a container
stickyHeader = table cause be as tall as needed but headers will stay on scroll

Both support filters and sorter, just don't use sticky and scroller together this is no point and this is not support.

[ivanny]

Hi @TheSin- , thanks for reply.
I'm using only "stickyHeader" after I tried without fortune scroller widget.
In particular I need to attach sticky header to its parent, as in second example here: https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html
This is what I was looking for, horizontal and vertical scroll for large table, sort and filter without alignment problems I found with scroller widget.
But...in IE the header is flickering on-scroll, only in IE. This is my problem.
I hope you could help me, thanks in advance.

[Francks11]

Tablesorter is for now, not optimize for large table... For large table, I use SlickGrid. You can find this project on github. https://github.com/mleibman/SlickGrid

[marcusklaas]

I can confirm that this issue persists after updating to master.

[marcusklaas]

Thanks @Mottie! Your hard work is much appreciated! 👍