Tablesorter — How can I sort a column by first or last name (both ascending) rather than toggling between ascending and decending?

Question

I want to use tablesorter to sort a column (column contains first name + last name) so that clicking the header toggles between sorting by first name and sorting by last name, both in ascending order. I have found a jsfiddle (link) that is very close to what I want to do.

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

        }
    });

});

It toggles between sorting by name (ascending) and sorting by percentage (descending) when the header is clicked. However, in my case, I want it to toggle between sorting first name (ascending) and last name (ascending). I want both sorts to be ascending and I'm not sure how to modify this code to make that happen. If nothing else, I can make them separate columns instead and give up on this, but I think it would look better to have the full name displayed together.

I tried looking through the documentation, but I wasn't able to figure out a way.

Answer 1

Just keep the html structure as it is (), and change just its text-content:

<h3>Click on the "%" sign to sort the first column by percentages;<br>Click outside to sort by name</h3>

<table id="games">
    <thead>
        <tr>
            <th>Firstname <span class="percSort">&nbsp;Lastname&nbsp;</span>

            </th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="gamename">
                <div style="width:66%;background-color: hsla(84,100%,50%,0.7);"></div>
<span class="name">Alice</span>

<span class="perc">Petterson</span>

            </th>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <th class="gamename">
                <div style="width:46%;background-color: hsla(34,100%,50%,0.7);"></div>
<span class="name">Peter</span>

<span class="perc">Brook</span>

            </th>
            <td>234</td>
            <td>Ox</td>
            <td>http://www.yahoo.com</td>
        </tr>