Sort HTML Table, that gets appended via JQuery

Question

Hello i'm trying to use Tablesorter(https://github.com/christianbach/tablesorter) to sort a table of mine which i generate throu JQuery.appends. This is how my code looks:

$(document).ready(function() {


*Lotsa more code .....*



    $.get("../skillqueue",{keyid: keyid, charid: charid},function(xmlskillqueue){
    console.log("XML Skillqueue");
    console.log(xmlskillqueue);

    //Variables for
    var rowsets = xmlskillqueue.getElementsByTagName("rowset");
    var skillrows;

    for(var i = 0; i < rowsets.length; i++){
        if(rowsets[i].getAttribute("name") == "skillqueue"){
            skillrows = rowsets[i].getElementsByTagName("row");
        }
    }

    //Defines Table Headers
    $("#tableskillqueuelist").append(
            "<thead>" + 
            "<tr>" + 
            "<th>Order: </th> "+
            "<th>Skill Name: </th> "+
            "<th>Training to: </th> "+
            "<th>Starts:</th> "+
            "<th>Ends:</th> "+
            "</tr> "+
            "</thead>"+
            "<tbody>"
    );

    for(var i = 0; i < skillrows.length; i++){
        (function(i, skillrows) {

            $.get("../getitemname", {itemid:skillrows.getAttribute("typeID")},function(itemname){               
                $("#tableskillqueuelist").append(
                        "<tr> " + 
                        "<td>" + skillrows.getAttribute("queuePosition") + ". " +                           
                        "<td>" + itemname + "</td>" +
                        "<td>" +  "|Train to: " + skillrows.getAttribute("level") + "</td>" +
                        "<td>" +  "|Training Starts: " + skillrows.getAttribute("startTime") + "</td>" +
                        "<td>" +  "|Training Ends: " + skillrows.getAttribute("endTime") + "<td>" +                     
                        "</tr>"
                );
            })
        })(i, skillrows[i]);                    
    }
    //Ends the table body
    $("#tableskillqueuelist").append("</tbody>");
});
});

Now i'm wondering what i need to do to have it successfully run the $("#tableskillqueuelist").tablesorter(); method. Since it seems like whenever i try and run it, the #tableskillqueuelist seems to be empty.

Answer 1

You need to tell table sorter that you've changed the data and that you want to sort it by triggering events.

Example from the docs: http://tablesorter.com/docs/example-ajax.html

$("table").tablesorter(); 
  $("#ajax-append").click(function() { 
     $.get("assets/ajax-content.html", function(html) { 
         // append the "ajax'd" data to the table body 
         $("table tbody").append(html); 
        // let the plugin know that we made a update 
        $("table").trigger("update"); 
        // set sorting column and direction, this will sort on the first and third column 
        var sorting = [[2,1],[0,0]]; 
        // sort on the first column 
        $("table").trigger("sorton",[sorting]); 
    }); 
    return false; 
});

HTH