TableSorter doesn't recognize numbers

Question

I have these two examples, which both use the same code but different sources of tablesorter. However one of them works as the other one doesn't.

$("table").tablesorter(); 

http://jsfiddle.net/lightheaded/x78cd/ (doesn't work)

http://jsfiddle.net/lightheaded/RYL54/ (works)

It should first sort by percent and then by users. However it doesn't recognize the second number to be a number. I have a similar situation on my site. What could be the issue? I'm using 2.14.4 min on my site as well.

Answer 1

Upgrade to a more recent version of table sorter. Recent version seems to parse out tokens from strings such as 99% coverage (12.08 million users) and 99% coverage (10.2 million users) and compare them one by one so strings that contain more than one number still sort out as expected (we have 10 compared with 12 in the above example).

OR: you can create a custom parser that normalizes the percentage and users; and use it:

$.tablesorter.addParser({
    id: 'percentThenUsers',
    is: function (s) {
        return false;
    },
    format: function (s) {
        // "99% coverage (12.08 million users)" gets converted to
        // "1099 1012.08" which can then be sorted as text
        var m = s.replace(/[^\d\.]/g, " ").replace(/ +/g, " ").split(" ");
        return (+m[0] + 1000) + " " + (+m[1] + 1000);
    },
    type: 'text'
});

$(function () {
    $("table").tablesorter({
        debug: true,
        headers: {
            0: { sorter: 'percentThenUsers' }
        }
    });
});

Demo here

Answer 2

Tablesorter attempts to detect the content of table cells automatically. In this case it is finding text and not percentage or digit values.

The first demo is using the original tablesorter which doesn't use alphanumeric sorting, so it can only sort text blocks. Check out this updated demo where a row with this data is added:

<tr><td>10% coverage (1.0 million users)</td></tr>

The 10% is placed above 100% in ascending sorts - not what you would expect.

The second demo is using an updated version of tablesorter which does use alphanumeric sorting. It splits the text into blocks and is able to sort the content as you would expect. Here is an updated demo with the above row included.

If you "need" to use the original tablesorter, then use the parser provided by @SalmanA.