ajax响应后的jQuery排序表

Question

我有这个小项目，可以使每个网站获得多个Alexa排名。

我正在尝试使用jquery.tablesorter.js对表进行排序，但是它不起作用，因为我正在为每个URL发送一个ajax请求，然后显示它。

这是我的jquery和ajax请求：

<script> 
$(document).ready(function(){

    $('#btnurls').click(function(){
        $('#loadingmessage').show();
        var arrayOfLines = $('#websiteurls').val().split('\n');

        $.each(arrayOfLines, function(index, item) {
                $.ajax({
                type: "POST",
                url: "ajax_pages/ajax_alexa.php",
                data: "textposted=" + item,
                cache: false,
                success: function(html){
                            $('#loadingmessage').hide();
                            for (var i = 1; i <= 1; i++) {                   
                                $("#content table").delay(1000)
                                    .queue(function (nxt) {
                                   $(this).append(html);                              
                                    nxt();
                                }); 
                            }
                            $("#websiteurls").val("");
                    }
                });

        });
    });

$("#textarea_reset").click(function(){
    $("#websiteurls").val("");
});

});
</script>

alexa_rank.php

<?php $line = $_POST['textposted'];?>
<tr>
<td><?php if (!filter_var($line, FILTER_VALIDATE_URL) === false) {echo $line;} else {echo "$line";}?></td>
<td>
<?php

         $xml  = simplexml_load_file('http://data.alexa.com/data?cli=10&dat=snbamz&url='.$line);
     $rank = isset($xml->SD[1]->POPULARITY)?$xml->SD[1]->POPULARITY->attributes()->TEXT:0;
     $country_rank=isset($xml->SD[1]->COUNTRY)?$xml->SD[1]->COUNTRY->attributes()->RANK:0;
     $country_name=isset($xml->SD[1]->COUNTRY)?$xml->SD[1]->COUNTRY->attributes()->NAME:0;
     echo $rank;
?>
</td>
<td><?php echo $country_rank; ?></td>
<td><?php echo $country_name; ?></td>
</tr>

现场测试https://www.bulkalexarankchecker.com/

Answer 1

基于jQuery tablesorter提供的示例AJAX，您需要在数据更新时触发表上的update事件。 可能是这样的：

$.each(arrayOfLines, function (index, item) {
    $.ajax({
        type: "POST",
        url: "ajax_pages/ajax_alexa.php",
        data: "textposted=" + item,
        cache: false,
        success: function (html) {
            $('#loadingmessage').hide();
            for (var i = 1; i <= 1; i++) {
                $("#content table").delay(1000)
                        .queue(function (nxt) {
                            $(this).append(html);
                            $(this).trigger("update");
                            nxt();
                        });
            }
            $("#websiteurls").val("");
        }
    });

});

理想情况下，您将等到所有数据都提取完之后，但是您没有为当前代码中的此类事件做好准备，因此这可能同样有效。