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

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.

Solution

The way the text extraction works is that it is only used when the table is initialized or updated. It's not really meant to sort two different blocks of information within the same cell, but it would be possible to use it to format the text a certain way, then use the textSorter option to sort the desired part (demo):

$(function () {

    var $cell;
    $('#games').tablesorter({
        theme: 'blue',
        textExtraction: {
            0: function (node, table, cellIndex) {
                var $n = $(node);
                // add semi-colon between values
                return $n.find('.name').text() + ';' + $n.find('.perc').text();
            }
        },
        textSorter: function (a, b) {
            var x = a.split(';'),
                y = b.split(';'),
                i = $cell && $cell.is('.active') ? 1 : 0;
            return $.tablesorter.sortNatural($.trim(x[i]), $.trim(y[i]));
        },
        initialized: function () {
            $cell = $('#games').find('.percSort');

            // trigger sort here because any initial sort using sortList
            // won't have the $cell variable defined, so it defaults to name
            $('#games').trigger('sorton', [ [[1,1]] ]);

            $cell.click(function () {
                // activate percentage sort
                $cell.addClass('active');
                return false;
            }).closest('th').click(function () {
                // clicking on header outside of percSort
                // inactivates the percentage sort
                $cell.removeClass('active');
            });

        }
    });

});

Updates:

To make sure the column doesn't get detected to only use a percent parser, set the sorter type in the header:
```
<th class="nameHead sorter-text">Game...</th>
```
To make the table initially sort the percent, you need to do two things:
- Add the "active" class to the cell <span class="perc active"> 66% </span>
- Add $('#games').trigger('sorton', [ [[1,1]] ]); because the $cell variable isn't defined until after tablesorter has initialized. And you can't define it before because the headers are rebuilt during initialization. Code added to the example above.