Question

I am doing a Chrome Extention now.
Cause, this extension will modify a TAB table content and then needs resorting.

After I did a research, I find that jQuery tablesorter does not sort the Modified table updated by local extension script.

I can do $(‘table’).trigger(‘update’) then rebuild the table using tablesorter IF I am doing this in TAB content script.

But the truth is that, my script is in isolated environment, which can not access content script variable or function or object.

If I rebuild the tablesorter in my extension script, the table will responds TWICE, which is silly.

What can I do to solve this problem. Thanks. Mason.

---

@Darin, I tried your points
It sitll does NOT WORK.

$("#xftw").after($("#pio").clone(0, 0));
$("#pio").eq(0).empty();


$("#pio").tablesorter({
    headers: {
        0: {
            sorter: false
        },
        2: {
            sorter: false
        },
        6: {
            sorter: "digit"
        },
        10: {
            sorter: false
        }
    },
    sortInitialOrder: "desc",
    sortList:[[7,1]],
    textExtraction: function (node) {
        if ($(node).attr("extraction") == "my") return "0" + $(node).find("span").text();
        var $firstNode = $(node).find(":first-child");
        return $firstNode.length <= 0 ? $(node).html() : $firstNode.html()
    },
    debug:true
});

var usersTable = $("#pio");
usersTable.trigger("update")
  .trigger("appendCache")
  .trigger("sorton", [[[6,1], [7,1]]]);

Answer 1

Rebuild the table, hide the original table, set your new table that you control in its place.

Or use .preventDefault() when you .trigger

Or change the id or classname of the table then work on it and .trigger

---

Some rough code on creating a new table based on the old table.

function copyTable(){
  var newTRs = [];
  var theTable = $(#tableID);
  var theRows = theTable.getElementsByTagName('tr');

  for (var i=0; i < theRows.length; i++){
    //you could also evaluate each row here and manipulate it as needed.
    newTRs.push(theRows[i].cloneNode(true));
  }
  return newTRs;
}

function buildNewTable(){
    var allRows = copyTable();
    var newTable = document.createElement('table');

    newTable.appendtherows(allRows);
    oldTable.attr('display','none');//or use a .class to hide old table
    $(newTable).appendTo(oldTablesDiv);
}