I'm using tablesorter to sort a grid on one of my pages. I'm making an AJAX call every 10 seconds for updated stock information, and updating my grid accordingly. That much is working, but I can't get my sort options to cache properly. Rather, I seem to have cached the sorting, but when I do, tablesorter also caches my previous rows, and displays them along with the new, sorted set of rows.
Example, my initial grid has 10 rows of data. I sort on the second column. After 10 seconds, a new set of 10 rows come in, but my initial 10 rows still show up, even though I've emptied them out. I've researched all over, and I can't seem to find the answer for this.
If I don't sort at all, and I don't call the trigger for "sorton", I get my 10 rows as desired, but the rows aren't sorted of course. If I call that trigger for "sorton", my data gets sorted, but I get 10 new rows every time the function gets called (20 rows total, then 30 rows total, etc).
Here is my code from inside my AJAX call:
if (myResult.Data.length > 0) {
$.each(myResult.Data, function() {
myRows += "<tr><td>" + this.column1 + "</td><td>" + this.column2 + "</td></tr>";
});
$("#myTBody").empty();
// $("#myTBody").append(myRows); //tried this first
// $("#myTable").trigger("update"); // combined with this
$("#myTBody").append(myRrows).trigger("update");
var sorting = $("#myTable")[0].config.sortList;
$("#myTable").trigger("sorton", [sorting]);
}
Hmm, that seems to be an issue with the original tablesorter (demo).
Sorry I don't remember the reason why the cache doesn't get cleared during the update; but this issue doesn't happen in my fork of tablesorter (demo).