jquery tablesorter ajax table only sorting one direction

Question

I have a table that I load via a jQuery load command. in the callback of the load function I initiate the tablesorter plugin. For some reason then the table only sorts descending not ascending. Even weirder, if I hold shift it will toggle correctly between asc and desc? Any idea what's going on here?

table.php

<table id="xyz">
<thead>
    <tr>
        <th>hi</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
    </tr>
</tbody>
</table>

jquery

$("#myDiv").load("table.php", function() {
    $("#xyz").tablesorter();
});

if I don't load the table via ajax then the tablesorter functions as expected.

Peabody

If I click really fast it looks like it does sort ascending but then sorts descending again. – Peabody

are you declaring .tablesorter() anywhere else in your file? you may be double-binding... – Fleabane

good thought but no I'm only calling .tablesorter() once – Peabody

Could you share a live demo? or tell us if there are any javascript errors. Have you tried debug mode? – Topaz

Answer 1

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!

Peabody

I had the same problem, I was loading two versions of jquery in the head. Your question let me figure it out, thanks – Whitebeam

Answer 2

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.

Excisable

Answer 3

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

Spineless

Correct answer for me as I couldn't find a way in the plugin docs to remove the previous binding. – Whatley

Answer 4

Issue is already resolved, but I'll mention that I had the same problem. The reason was in old version of jquery: I had 1.4.2, 1.4.4 was needed.

Hone

Answer 5

I had the same problem but a different setup, and the answers noted in this thread had not resolved my issue. Adding the solution for my scenario in case someone else has the same problem I had.

My table body rows are created dynamically from an .ajax call on page load and one column is set as the default sortList to sort after the data is loaded.

5 out of 10 columns are re-populated based on submitting a new date range. I do not rebuild the table body, but rather injected the data to the appropriate records, then resort based on my default sortList.

My issue was that after submitting a new date range, the tablesorter was now defined twice in the header, so clicking the header would sort twice, appearing to only sort one way.

My solution was to prevent the tablesorter header from being initialized twice. On page load, I let tablesorter sort the one column I set in the sortList property I set, but every new date range submited, I user the following lines to sort my column after data load:

$('#mytableBody').trigger("update");
var sorting = [[5, 1]];
setTimeout(function () {$('#mytableBody').trigger('sorton', [sorting]) }, 1);

I use setTimeout to ensure the data is fully loaded before sorting.

Hope this helps.

Karajan