CODEWITHSUNDEEP
jqueryajaxsortingtablesorter
Devin Crossman
Devin Crossman

Reputation: 7592

jquery tablesorter ajax table only sorting one direction

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.

Upvotes: 10

Views: 6154

Answers (5)

Manny Valdron
Manny Valdron

Reputation: 11

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.

Upvotes: 1

StaticVoid
StaticVoid

Reputation: 1537

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

Upvotes: 5

nickcoxdotme
nickcoxdotme

Reputation: 6707

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.

Upvotes: 5

dzmitry
dzmitry

Reputation: 401

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.

Upvotes: 1

Devin Crossman
Devin Crossman

Reputation: 7592

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!

Upvotes: 11

Related Questions