Dynamic Sorting with JQuery

Question

Hello,

I have an HTML table element called "results". This table is dynamically populated with the results of a web service. The web service is triggered when user clicks a button. This button calls the "getResults" function shown below. This function returns a collection of objects in JSON format. When the web service successfully returns, a function called getResultsCompleted is called. After the results have been dynamically added to the table, I call the tablesorter initializer on it, my code looks like the following:

function getResults() {
  $("#results > tbody").html("");
  $.ajax({
    type: "GET",
    url: "/GetResults",
    contentType: "application/json; charset=utf-8",
    success: getResultsCompleted,
  });
}

function getResultsCompleted(results) {
    var html = "";
    if (results.d.length > 0) {     
    $.each(results.d, function (i, r) {
      html += getRow(r);
    });
  }
  $("#results > tbody:last").append(html);
  $("#results").tablesorter(); 
}

The first time the results are loaded, sorting works fine. However, on subsequent loads, the sorting does not work properly. I feel like I need to somehow "destroy" the tablesorter when the "getResults" function is called. But I don't know how. Maybe I'm wrong altogether. Can somebody help me out? Thanks

http://tablesorter.com/docs/

Answer 1

You might be right on with destroying the table sorter but I have not experience with this sorter

I use flexigrid and there is also jgrid both are good table manipulators

but you might try remove the contents and rebuilding like so

  function getResultsCompleted(results) {
      var html = "";
      if (results.d.length > 0) {     
      $.each(results.d, function (i, r) {
        html += getRow(r);
      });
    }
    $("#results > tbody:last").children().remove();
    $("#results > tbody:last").append(html);
    $("#results").tablesorter(); 
  }

Answer 2

Figured it out. From the documentation:

$("table").trigger("update");