Wie sortiere ich eine Spalte auf mehrere Arten in einer Kopfzeile?

Ich habe den Tablesorter vonMotti und ich kann keine einfache Möglichkeit finden, eine bestimmte Spalte in mehr als einer Weise aus zwei verschiedenen Hot-Bereichen in derselben Kopfzeile zu sortieren. (Ein Weg über "Spielname" und ein anderer über "Prozentsatz".)
Mein Code sortiert das Spiel bereits nach dem Spielnamen, aber das gleiche passiert, wenn ich auf Prozent klicke (letzteres nicht nach Prozentsatz, sondern nach Name).

Was ist die Methode mit dem geringsten Code, um dies zu tun? (Vorzugsweise mit vorhandenen Tablesorter-Optionen.)

Tabellenkopfspalte:

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

Körpersäule:

<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>

Bereits 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();
            }
       }
    });

Was ich nicht kann: Teilen Sie meine entsprechende Spalte in mehrere Spalten auf. Es zeigt farbige Balken über das CSS an, das Sie sehen können.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage