jquery - How to sort one column via several ways in a header?

Question

I have the tablesorter from motti and I can't find out a simple way to sort a certain column in more than one way from 2 different hot areas in the same header. (One way via "gamename" and another via "percentage".)
My code already sorts on Game on the gamename, but it does do the same when clicking on percentage (so the latter not by percentage, but by name).

What's the least-code way to do this? (Preferably with existing tablesorter options.)

Table header column:

<th>Game <span class="percSort">%</span></th>

Body column:

<th class="gamename">
<div style="width:66%;background-color: hsla(84,100%,50%,0.7);"></div>
<span class="name">Alphabetic</span>
<span class="perc">66%</span>
</th>

Domready code:

    $("#games")
    .tablesorter({
        sortList: [['.percSort',1]],
        textExtraction:{
            1:function(node, table, cellIndex) {
                return $(node).find('.name').text();
            },
            '.percSort':function(node, table, cellIndex) {
                return $(node).find('.perc').text();
            }
       }
    });

What I cannot do: split my corresponding column in more column. It displays colored bars via the css you can see.

Answer 1

It is not possible with an existing option as the tablesorter only allows you to set (and not change) a single sorting order for a column. There is however a workaround, which simply switches a custom parser off and on depending on where on the header you click:

Table header column:

<th id="thgame">Game <span class="percSort">%</span></th>

JavaScript:

// Add custom table parser for percentage.
$.tablesorter.addParser({
  id: 'perc',
  format: function(s, table, cell, cellIndex) {
    return $(cell).find('.perc').text().slice(0, -1);
  },
  type: 'numeric'
});

// Create tablesorter and disable default sorting for column.
$('#games').tablesorter({ ... });
$('#thgame').unbind();

// Create custom sorting events for column.
$('#thgame').click(function(){ 
    $('#thgame').removeClass('sorter-perc');
    $('#games').trigger('updateRows');
    $('#games').trigger('sorton', [ [[0,'n']] ]);
});
$('.percSort').click(function(e){ 
    $('#thgame').addClass('sorter-perc');
    $('#games').trigger('updateRows');
    $('#games').trigger('sorton', [ [[0,'n']] ]);
    e.stopPropagation() // prevent previous event from firing.
});