StickyHeaders: widget doesn't update sticky header class names after sorting

[sanex3339]

Hi, i got following problem - StickyHeaders widget doesn't update sticky header class names after sorting.

I look at widget source code and looks like event on this line not triggered:
https://github.com/Mottie/tablesorter/blob/master/js/widgets/widget-stickyHeaders.js#L213

For test i replaced 'pagerComplete' + namespace event on click event and class names became changing.

code:

import 'tablesorter/dist/js/jquery.tablesorter';
import 'tablesorter/dist/js/jquery.tablesorter.widgets';

//...

$el.tablesorter({
    widgets:['stickyHeaders'],
    widgetOptions: {
        stickyHeaders_attachTo: container,
        stickyHeaders_appendTo: container
    }
});

[sanex3339]

Ping

[sanex3339]

ping

[Mottie]

Hi @sanex3339!

Sorry for not responding earlier... I was on a month-long vacation and I got back a little over a week ago. In a rush to catch up, I thought I responded to this issue since it is related to #1313.

Once I get settled, I will start working on tablesorter issues again.

Sorry for the delay!

[sanex3339]

Thank you

[Mottie]

Ok, now that I've had a little time to look at this, I can reproduce the issue. Would you please update this demo to show the problem?

I added this same request in issue #1313, so if you see one there, you probably won't need to make another demo.

Thanks!

[sanex3339]

So, we found problem.
In normal header in all unsorted columnbs all <th> elements have tablesorter-headerUnSorted classes.

In special sticky table all header <th> elemens in unsorted columns don't have tablesorter-headerUnSorted classes and this looks strange.

This problem can be reproduced in this demo: https://jsfiddle.net/wty134u7/58/

In our project we have following styles:

    &.tablesorter-headerUnSorted {
      // styles and icon for unsorted th
      .tablesorter-header-th-variant("\f0dc", @at-main-color-silent);
    }

    &.tablesorter-headerDesc {
      // styles and icon for desc th
      .tablesorter-header-th-variant("\f0dd", @at-main-color);
    }

    &.tablesorter-headerAsc {
       // styles and icon for asc th
      .tablesorter-header-th-variant("\f0de", @at-main-color);
    }

So, this styles works fine in main <thead> and don't work for sticky <thead> because this <thead> don't have tablesorter-headerUnSorted class.

[Mottie]

Ok, now I'm even more confused.

The demo does have the tablesorter-headerUnsorted class on sticky header table cells. I just checked this in Chrome, Firefox and IE11... Edge isn't working just yet.

What is the & in the SASS indicating? The sticky header table is appended after the original table, so if it an ID, then that may be the issue.

[sanex3339]

We have any 2 cells in sticky table, cellA and cellB.
By default they both have class tablesorter-headerUnSorted.

Now click on cellA one or few times. Then click on cellB one or few times.
After that, cellA won't have class tablesorter-headerUnSorted

[sanex3339]

[Mottie]

Thanks! I see the problem now!

[sanex3339]

thanks!