CODEWITHSUNDEEP
jquerytablesorter
Fons
Fons

Reputation: 857

jQuery tablesorter is not sorting number correctly

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>

Upvotes: 24

Views: 30834

Answers (8)

Dave
Dave

Reputation: 3892

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 (starting with 0), type
     }
 });

Upvotes: 27

user2261392
user2261392

Reputation: 1

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));
};

Upvotes: 0

r0skar
r0skar

Reputation: 8696

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)

Upvotes: 3

Jeff Steil
Jeff Steil

Reputation: 1770

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.

Upvotes: 5

Paul G Petty
Paul G Petty

Reputation: 29

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.

Upvotes: 3

Fons
Fons

Reputation: 857

<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

Upvotes: 27

pjesi
pjesi

Reputation: 4051

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.

Upvotes: 2

tvanfosson
tvanfosson

Reputation: 532515

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; 
        } 
    }); 
});

Upvotes: 1

Related Questions