16

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

6 Answers 6

23

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>
5
  • 1
    -1 overkill. much more elegant to use metadata and specify the sorting algorithm tablesorter should use inline. see my answer below. Commented Jun 9, 2009 at 4:22
  • 2
    @Antony Trupe but as specified in question does he has control to put meta-data in table html generated by "displaytag" library Commented Jun 9, 2009 at 4:43
  • @The Village Idiot then he's screwed(ie will have kludgy code) Commented Jun 9, 2009 at 13:10
  • 5
    Remember to add jquery.metadata.js (seperate project) if you want to set these things seperatly. Not mentioned directly in documentation i believe.
    – Soraz
    Commented Aug 6, 2010 at 10:04
  • tvanfosson's solution should work for the tfoot. tablesorter() recognizes nn: { sorter:'date' } as a valid type too.
    – gordon
    Commented Apr 22, 2013 at 22:15
8

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();
   });
1
  • 7
    But it meets the requirement and doesn't rely on server side changes which the OP indicates can't be made.
    – tvanfosson
    Commented Jun 9, 2009 at 11:59
2

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.

1
  • -1 doesn't have a solution, which is to explicitly specify a sorting method. see my answer. Commented Jun 9, 2009 at 4:21
0
  1. Blank fields could be a problem (e.g they are not 0), try using custom parser which removes any non-numericals and forces values to integers (example: http://paste.pocoo.org/show/90863/ )

  2. Put your 'total' row inside a <tfoot> </tfoot> tag right before the end of the table

0

I found that the following will work with unrecognized numeric (digit) columns. It appears that 0 is considered text by the current version (2.0.3) of tablesorter.

Including the sample from tvanfosson, this script at the bottom of your page would move your last row from the footer which prevents it from being sorted with the data within tbody and would force the sorter to use a numeric sort rather than the text sort it is using as you described.

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

  $("#communityStats").tablesorter({
     debug: true,
     headers: { 
       0:{sorter: 'digit'}
       ...
       10:{sorter: 'digit'}
     }
  });

}); 
1
  • 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.
    – catalpa
    Commented May 19, 2009 at 18:30
0

fixed header for tablesorter plugin :

css

table.tablesorter thead {
position: fixed;
top: 35px; // 
}

JS

function tableFixedHeader() {
   var tdUnit = $('.tablesorter tbody tr:first').children('td').length;
   for(var i=0;i<tdUnit; i++) {
     $('.tablesorter thead th').eq(i).width($('.tablesorter tbody td').eq(i).width());
   }
   $('.tablesorter').css('margin-top',$('.tablesorter thead').height()); 
}

HTML

<div id="container">
   <div id="topmenu" style="height:35px;">some buttons</div>
   <div id="tablelist" style="width:100%;overflow:auto;">
      <table class="tablesorterw">.....</table>
   </div>
</div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.