tablesorter-headerUnSorted not changing on sort

[jnoes]

I'm having an issue where the class that tells whether column is unsorted, sorted asc, or sorted desc is not getting applied on the sort. The table has multiple thead and tbody sections and seems to sort each section as expected. So the sort happens, but it seems like all it doesn't recognize the sort as happening for these class changes. Is there something that we need to do to handle multiple thead/tbody tables?

Markup on initial load:

After clicking header to sort, note that aria-label changes and sort actually happens:

[Mottie]

Hi @jnoes!

First off, only one thead is allowed per table (ref), so that might be the issue here if this is the case.

Otherwise, I don't see a sort applied to either of those ths in the screenshots. How do you know a sort is applied? Is the content of the tbody sorting but not updating the thead at all?

It would really help me troubleshoot the problem if you could duplicate this issue in a demo. Please modify this demo to show the problem.

[jnoes]

Yes, I think we came to the conclusion at the same time that the multiple thead structure is not really valid. But to further the discussion, the sort was applied because the rows in the tbody sections would sort when clicking the header. We will move to a one thead/multiple tbody structure, changing those lower thead to tbody with the no sort class. This should fix the problem, but the one thing it removes is the ability to click on the secondary thead headers to sort the table.

Basically the structure was NFL divisional standings, so multiple thead/tbody in one table for each division. Clicking on any of the headers was actually sorting all the tbody sections, which we wanted, but the sort class was not being applied. I imagine it had to do with it processing the "other" thead headers and messing up the logic in determining whether or not a column was sorted.

Updated demo here here As you can see, the top headers do not change sort class, but interestingly the second thead does.

[Mottie]

I can look into adding a duplicate header later tonight. In the mean time, would the stickyHeaders widget work for you?

[jnoes]

I think stickyHeaders solves a different issue. Working the structure back to one thead and changing those additional theads to tbody worked as far as getting the sort to be recognized in the header, so I think we're good on that account. We can do without the sortable tbody "headers" for now. Thanks for your help.

I guess if there is one thing that would be open on this, it would be how to allow clicking on those secondary headers (the elements within the ) to initiate a sort. The reason for this would be if the user is scrolling down on the page and wants to sort on a column, they could click on one of closest header versus scrolling up. If there is a way to already do this, that's great, but like I said, we can do without that for now.

Thanks again.

[Mottie]

For now you can use this method... it's not very pretty nor efficient, but it works (demo):

$(function() {
  $('table').tablesorter({
    theme: 'blackice',
    widgets: ['zebra', 'columns'],
    initialized: function(table) {
      var c = table.config,
        $extraHeaders = c.$table.children('tbody.tablesorter-infoOnly');
      $extraHeaders.html(c.$table.children('thead').html());
      $.tablesorter.bindEvents(table, $extraHeaders);
      $(table).on('sortEnd', function() {
        $extraHeaders.html(c.$table.children('thead').html());
        $.tablesorter.bindEvents(table, $extraHeaders);
      });
    }
  });
});

[Mottie]

Ok, this was actually a bug and it is now fixed in the master branch. You'll still need to change the extra theads into info-only tbodies.

<tbody class="tablesorter-infoOnly headers"></tbody>

Then clone the rendered header html and bind the sort events (demo):

$(function () {
    $( 'table' ).tablesorter({
        theme: 'blue',
        widgets: [ 'zebra', 'columns' ],
        initialized: function ( table ) {
            var c = table.config,
                $extraHeaders = c.$table.children( 'tbody.headers' );
            // make a copy of the rendered headers
            $extraHeaders.html( c.$table.children( 'thead' ).html() );
            // make extra headers clickable
            $.tablesorter.bindEvents( table, $extraHeaders );
        }
    });
});

But as you can see in that demo, it will work on any number of extra headers.

[Mottie]

New release available.

[Mottie]

Ok, sorry about this, but I had to revert that last change. I mistakenly changed the code and broke other widgets like the sticky headers and scroller.

The only change needed to make the demos from this issue work is to bind to the table cells instead of the row (demo):

// this line changed
 $.tablesorter.bindEvents( table, $extraHeaders.find('td,th') );

Here is the full code:

$(function () {
    $( 'table' ).tablesorter({
        theme: 'blue',
        widgets: [ 'zebra', 'columns' ],
        initialized: function ( table ) {
        var c = table.config,
        $extraHeaders = c.$table.children( 'tbody.headers' );
      // make a copy of the rendered headers
      $extraHeaders.html( c.$table.children('thead').html() );
      // make extra headers clickable
      $.tablesorter.bindEvents( table, $extraHeaders.find('td,th') );
    }
    });
});

[calebjely]

This only works for the first duplicate of the main thead. The 3rd and all subsequent headers are not clickable.

      $.tablesorter.bindEvents( table, $extraHeaders.find('td,th') );

In your demo it only works for the first two headers, demo.

[Mottie]

Hi @calebjely!

Ahh, it looks like an issue in the code.

If you modify the demo as follows, it'll work:

$extraHeaders.each(function(i, header) {
  $.tablesorter.bindEvents(table, $(header).find("td,th"));
});

I'll make the needed changes to the core to allow passing all of the extra headers together.