JQuery tablesorter problem

javascript jquery html sorting tablesorter

28,475

Solution 1

The first problem is due to the fact that the table sorter auto detects the column to a 'text'-column (probably because the empty cells). To solve this use this code to initialize the tablesorter and set all the field to either digit or currency depending on the data:

<script type="text/javascript" >
jQuery(document).ready(function() 
{ 
    jQuery("#communityStats").tablesorter({ 
        headers: { 2: { sorter:'digit' } , 
                   3: { sorter:'digit' } ,
                   4: { sorter:'digit' } ,
                   5: { sorter:'digit' } ,
                   6: { sorter:'digit' } ,
                   7: { sorter:'digit' } ,
                   8: { sorter:'currency' } ,
                   9: { sorter:'currency' } ,
                   10: { sorter:'currency' } ,
                   11: { sorter:'currency' } 
                 } 
    }); 
});
</script>

Solution 2

I would suggest using some Javascript to remove the last row from the table. Add a footer and then re-add the removed row from the table. To solve the issue with empty data in a numeric cell you may need to add your own custom parser.

   $(function() {
       $('#communityStats').append("<tfoot></tfoot>");
       $('#communityStats > tr:last').remove()
                                     .appendTo('#communityStats > tfoot');
       $('#communityStats').tablesorter();
   });

Solution 3

I think the answer to #1 is that you have blank fields for some numerical columns causing the tablesorter to detect that column as a "string" column.

28,475

Author by

Dónal

I earn a living by editing text files. I can be contacted at: [email protected] You can find out about all the different kinds of text files I've edited at: My StackOverflow Careers profile

Updated on December 28, 2020

Comments

Dónal over 3 years
I'm having a couple of problems with the JQuery tablesorter plugin. If you click on a column header, it should sort the data by this column, but there are a couple of problems:
1. The rows are not properly sorted (1, 1, 2183, 236)
2. The total row is included in the sort
Regarding (2), I can't easily move the total row to a table footer, because the HTML is generated by the displaytag tag library over which I have limited control.

Regarding (1), I don't understand why the sort doesn't work as I've used exactly the same JavaScript shown in the simplest example in the tablesorter tutorials.

In fact, there's only a single line of JS code, which is:
```
<body onload="jQuery('#communityStats').tablesorter();">
```
Thanks in advance, Don
Rafael Lucena about 15 years

the debug setting can be removed, but it will help you see what the code is setting as each column's parser. If you have firebug installed, it prints to the console.
antony.trupe almost 15 years

-1 doesn't have a solution, which is to explicitly specify a sorting method. see my answer.
antony.trupe almost 15 years

-1 overkill. much more elegant to use metadata and specify the sorting algorithm tablesorter should use inline. see my answer below.
tvanfosson almost 15 years

But it meets the requirement and doesn't rely on server side changes which the OP indicates can't be made.
antony.trupe almost 15 years

@The Village Idiot then he's screwed(ie will have kludgy code)
Soraz almost 14 years

Remember to add jquery.metadata.js (seperate project) if you want to set these things seperatly. Not mentioned directly in documentation i believe.
gordon about 11 years

tvanfosson's solution should work for the tfoot. tablesorter() recognizes nn: { sorter:'date' } as a valid type too.