Why does my tablesorter keep caching my old rows?

Question

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]);
}

Beside

Answer 1

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).

Sommersommers

I just take a look at the original tablesorter JS code. In the update function, it calls cache = buildCache(me); in a setTimeout function which will be executed after 1ms. This causes the sorton to use the cache before the cache is updated. Thus, if I trigger my sorton after 100ms I triggered the update, for example, then I can get the sorting done without additional rows appending to the result. Please correct me if I'm wrong. – Owensby

Same caching problem (caused by update --> sorton) in your fork. – Warily

Answer 2

Although this post is old, just in case there is someone like me who is looking for fixes to the original tablesorter, I fix the issue by having sorton triggered in the following "delayed" way.

$("#myTBody").append(myRrows).trigger("update");
var sorting = $("#myTable")[0].config.sortList;
setTimeout(function () {
    $("#myTable").trigger("sorton", [sorting]);
}, 100);

The reason of doing so is because the update function in the original tablesorter doesn't update the cache immediately. It updates it 1ms after the update method is called. So, sorton can't get the updated cache immediately. This is what I conclude after reading the original JS code, please correct me if I'm wrong.

Demo: http://jsfiddle.net/eY8uH/692/

Owensby

this worked for me too.. The answer below from Saran did not. – Tarpaulin

Answer 3

The solution w/o using timeout:

$("#myTBody")
  .append(myRrows);
$("#myTable")
  .trigger("update")
  .trigger("sorton", [$("#myTable")[0].config.sortList])
  .trigger("appendCache");

Based on: https://mcmap.net/q/618895/-updating-jquery-tablesorter-plugin-after-removing-a-row-from-dom

Warily

Answer 4

Old post but recently got into this issue, for me this worked

$("#myTable")[0].config.cache = null;
$("#myTable").trigger("sorton");

It just keep the cache either I was not able to find any reasonable flag to avoid it so I set it null

Mechanotherapy