jquery tablesorter ajax table only sorting one direction

Just thought I would throw another answer up here in case anyone else runs into this. This happened to me when I tried to call .tablesorter() on a table using a class selector instead of an id selector. So changing it from

$('.tablesorter').tablesorter();

to

$('#tablesorter').tablesorter();

(and the markup to reflect this) fixed this problem for me.

Once again, seeing as how this has been resolved, I would like to share my different scenario.

My table body rows are created dynamically from an .ajax call, once a user adds/modifies/deletes a row, then the table body rows are .removed() and recreated with the same .ajax call via function(). This of course double-binds the tablesorter since the table head remains, which causes the strange behavior.

The fix for me was to unbind the tablesorter prior to initializing $('#mytable').addClass('tablesorter').tablesorter(); like so:

$('#mytable')
    .unbind('appendCache applyWidgetId applyWidgets sorton update updateCell')
    .removeClass('tablesorter')
    .find('thead th')
    .unbind('click mousedown')
.removeClass('header headerSortDown headerSortUp');

Another fix might be to create the entire table in the .ajax call rather than just the body <tr>'s.

Hope this helps

Okay so I was double-binding like Jason thought.

I was actually calling jQuery's load function on a class and I had two div's with that class on my page. So it actually was calling the callback function twice?

I think it's kind of weird behaviour as the content being loaded into both divs was the same but it looks like jQuery does a separate ajax call for each of the divs. Thanks for your comments!