CODEWITHSUNDEEP
javascriptjquerytablesorter
fred2
fred2

Reputation: 1110

Tablesorter not sorting on dynamically added content

I have a problem with Jquery Tablesorter where I am adding data dynamically to a pre-existing table.

According to the docs, after adding content, all that needs to be done is for $("table").trigger("update") to tbe run to tell tablesorter than new content has been added, however in reality this appears not to work.

See http://jsfiddle.net/7Wurn/9/ for an example. Clicking on the HTML table headers will order the columns, but after adding a new row the new row does not get sorted.

It seems like something minor is wrong, as the example used on the Tablesorter website uses almost identical code to the code I've added on JSFiddle. The only difference is that the $("table").trigger("update"); is run as part of a callback after an Ajax call.

Any ideas what is wrong?

Upvotes: 2

Views: 2520

Answers (2)

dejavu
dejavu

Reputation: 3254

I also faced the same problem when using datatables in jQuery. When you are appending it to the table you are not appending the data to same tbody element. Instead your data is being added to a new tbody element. The table format should be<thead></thead> and then <tbody></tbody>.

Do something like this:

$("#tableId tbody").append(someContent);

I have updated your fiddle http://jsfiddle.net/7Wurn/68/. Also please use jquery 1.9.1. Its not working in 2.0b1. Don't know why

Upvotes: 3

Zack Tanner
Zack Tanner

Reputation: 2590

I have been playing with this and found that it's related to how, in the DOM, a tbody tag is being rendered.

I got it to work for the first entry by doing the following:

$("table tbody:first").before('<tr><td>Aaphod</td><td>Beeblebrox</td> <td>28</td> <td>$9.99</td> <td>20%</td><td>jul 6, 2006 8:14 am</td></tr>');

That's because it sticks it into the first tbody, and tablesorter recognizes it. However, subsequent additions cause it to be inserted as a new tbody tag.

I'm going to keep playing with it and will update if I get something!

Upvotes: 1

Related Questions