tablesorter with jquery does not sort numbers correct

Question

Trying for days now (2 that is) to get tablesorter with Jquery to get the numbers correctly sorted. I am using the last versions of both scripts.

The table is rendered fine, but sorting of the numbers goes wrong. If sorted it gives the following result:

8 7 4 32 31 3 and so on.. where you would expect that: 32 31 8 etc would be displayed.

I read some comments on adding extra javascript code but no (for me to understand (not that much into javascript)) javascript example can be found.

the script I use now is basic and looks like this

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

Hoping for a good example that will resolve this issue for me.

/Fons

As per request the HTML result of the table

<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>
</body>
</html>

The only thing i changed in the result are the names. /Fons

Answer 1

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 2

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 3

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

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 5

Hi, I am facing that same problem but none of the above solutions worked for me.

My data is like that

12,235.25 8,238.45 10,235.25 9,230.23 7,230.17 6,230.17

Please help how can I change my code?

Answer 6

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.