jQuery tablesorter is not sorting number correctly

Question

I've been trying for days now to get jQuery tablesorter correctly sort numbers in my table column.

I am using the current latest versions of both scripts.

The table is rendered fine, but sorting the numbers is not working correctly.

When I sort a number column it gives me the following results:

8 7 4 32 31 3 etc..

where you would expect: 32 31 8 etc...

I read some comments on adding extra javascript code but I can't find any good javascript examples.

The jQuery I'm using now is as follows:

$(document).ready(function()
    {
      $("#table1")
       .tablesorter(
          {
            sortList: [[0,0]],
            widthFixed: true,
            widgets: ['zebra']
          } )
    }
);

Here is my HTML:

<table id="table1" class=tablesorter>
    <thead>
        <tr>
            <th width=65>Name</th>
            <th width=40>Count</th>
        </tr>
     </thead>
     <tbody>
         <tr><td>Name_1</td><td>32</td></tr>
         <tr><td>Name_2</td><td>12</td></tr>
         <tr><td>Name_3</td><td>11</td></tr>
         <tr><td>name_4</td><td>14</td></tr>
         <tr><td>Name_5</td><td>7</td></tr>
         <tr><td>Name_6</td><td>3</td></tr>
         <tr><td>Name_7</td><td>32</td></tr>
         <tr><td>Name_8</td><td>31</td></tr>
         <tr><td>Name_9</td><td>35</td></tr>
      </tbody>
</table>

Answer 1

<th width=110 class=\"{sorter: 'digit'}\">Count</th>

This solved the problem. Telling the javascript to handle the value's as a digit made the sorting work correct. Still bit silly that number values are not checked in the script as being numbers. But i guess there is a higher purpose for that in the end.

Thanks all for your time and help

/Fons

Answer 2

Hopefully this will help someone if they find this post, in tablesorter you can now simply use.

$(".table").tablesorter({
     headers: {
         5: { sorter: 'digit' } // column number, type
     }
 });

Answer 3

This may have been obvious to others (not to me) but to get the solution working with the {sorter: 'digit'} metadata you need to use the jQuery metadata plugin.

Answer 4

I know this is an old question, but I came across the very same problem and instead of trying ANY solution posted here, you should first check the version of your plugin. Every problem was solved when I found out I wasnt using the newest version (2.0.5)

Answer 5

It looks like you need to pad your numbers. That explains why 8, 7, and 4 are ordered before 32, and 31.

Try this:

function padLeft(s,len,c){
  c=c || '0';
  while(s.length< len) s= c+s;
  return s;
}

$("table").tablesorter({
  textExtraction: function(node) {         
    return padLeft(node.innerHTML,2);
  } 
});

Use higher value than 2 if you need to sort bigger numbers.

Answer 6

You might try this as well:

$(document).ready(function() { 
    $("table").tablesorter({ 
        // put other options here ...
        textExtraction: function(node) {  
            return parseInt($(node).text()); 
        } 
    }); 
});

... this treats the sorted cells' content as integers, after extracting just the text.

Answer 7

Can you show your html as well? Tablesorter ought to detect and handle numeric sorting without any special options. Is it possible that your numeric values are surrounded by html? In that case you may need a custom method to extract the values from the html.

Example from the referenced link:

$(document).ready(function() { 

    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // define a custom text extraction function 
        textExtraction: function(node) { 
            // extract data from markup and return it  
            return node.childNodes[0].childNodes[0].innerHTML; 
        } 
    }); 
});

Answer 8

Find in jquery.tablesorter.js code:

this.isDigit = function(s,config) {

    var DECIMAL = '\\' + config.decimal;
    var exp = '/(^[+]?0(' + DECIMAL +'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)' + DECIMAL +'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*' + DECIMAL +'0+$)/';

    return RegExp(exp).test($.trim(s));
};

And replace it with:

this.isDigit = function(s,config) {

    var DECIMAL = '\\' + config.decimal;
    var exp = '/(^[+]?0(' + DECIMAL +'0+)?$)|(^([-+]?[1-9][0-9]*)$)|(^([-+]?((0?|[1-9][0-9]*)' + DECIMAL +'(0*[1-9][0-9]*)))$)|(^[-+]?[1-9]+[0-9]*' + DECIMAL +'0+$)/';

    //return RegExp(exp).test($.trim(s));
    return !isNaN(parseFloat($.trim(s))) && isFinite($.trim(s));
};