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

});

理想情况下，您会等到所有数据都已获取，但您没有使用当前代码为此类事件做好准备，因此这可能同样有效。