Как отсортировать один столбец несколькими способами в заголовке?

У меня есть таблица сортировщик изМоти и я не могу найти простой способ сортировки определенного столбца более чем одним способом из 2 разных горячих областей в одном и том же заголовке. (Один путь через «gamename», а другой через «процент».)
Мой код уже сортируется в Game по имени игры, но он делает то же самое при нажатии на процент (поэтому последний не по проценту, а по имени).

Каков наименьший код способ сделать это? (Желательно с существующими опциями сортировщика.)

Столбец заголовка таблицы:

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

Колонка кузова:

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

    $("#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();
            }
       }
    });

Что я не могу сделать: разделить мой соответствующий столбец в более столбце. Он отображает цветные полосы через CSS, который вы можете увидеть.

Ответы на вопрос(2)

Ваш ответ на вопрос