排序 HTML Table，通过 JQuery 附加

Question

您好，我正在尝试使用 Tablesorter(https://github.com/christianbach/tablesorter) 对我通过 JQuery.appends 生成的 table 进行排序。这是我的代码的样子：

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

现在我想知道我需要做什么才能成功运行 $("#tableskillqueuelist").tablesorter();方法。因为似乎每当我尝试运行它时，#tableskillqueuelist 似乎是空的。

Answer 1

您需要告诉 table 排序器您已经更改了数据并希望通过触发事件对其进行排序。

来自文档的示例：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

排序 HTML Table，通过 JQuery 附加

Sort HTML Table, that gets appended via JQuery

javascript

jquery

tablesorter