Dynamic Sorting with JQuery

Question

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/

user462166 · Accepted Answer · 2010-10-12 12:48:48Z

1

Figured it out. From the documentation:

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

answered Oct 12, 2010 at 12:48

user462166

4,1753 gold badges21 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mcgrailm · Accepted Answer · 2010-10-12 12:32:57Z

0

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

answered Oct 12, 2010 at 12:32

mcgrailm

17.7k22 gold badges85 silver badges131 bronze badges

Collectives™ on Stack Overflow

Dynamic Sorting with JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related