Tengo el clasificador demotti y no puedo encontrar una manera simple de ordenar una determinada columna en más de una forma de 2 áreas activas diferentes en el mismo encabezado. (Una vía a través de "nombre del juego" y otra vía "porcentaje").
Mi código ya ordena en Juego en el nombre del juego, pero hace lo mismo cuando hago clic en porcentaje (por lo que este último no por porcentaje, sino por nombre).

¿Cuál es la forma menos codificada para hacer esto? (Preferiblemente con las opciones de clasificación de tablas existentes).

Columna de encabezado de tabla:

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

Columna del cuerpo:

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

Código 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();
            }
       }
    });

Lo que no puedo hacer: dividir mi columna correspondiente en más columna. Muestra barras de colores a través del CSS que puede ver.