1

我正在创建一个“实时”排行榜。每 X 秒，向服务器发送一个 AJAX 请求以加载最新的排行榜数据。

如果数据发生变化，排行榜将根据 AJAX 请求立即更新。

但是 - 如果有变化，而不是立即显示新数据，我想将表格行动画到它的新位置，而不是立即重新加载它。实现这样的目标的最佳方法是什么？

我现在正在更新排行榜，如下所示：

$(document).ready(function() {

    showLeaderboard();

    if (autoUpdate != false) {
        window.setInterval(function(){  
            $('#wrapper h2, #leaderboard tbody tr').remove(updateLeaderboard());
        }, reloadInterval);
    }

});

function updateLeaderboard() {

    leaderBoardType;
    numRecords;
    quizIDs;    
    topListTitle;
    latestTitle;

    $.webMethod({
        url: 'xxx',
        data: '{quizIDs:"'+quizIDs+'",numRecords:"'+numRecords+'"}',
        type: 'POST',
        cache: false,
        beforeSend: function () { 
            $('body').append('<div class="loading"></div>');
        },
        success: function (ret)
        {
            $('.loading').remove();
            $('#wrapper').prepend(topListTitle);

            $.each(ret.leaderboard,function(i){
                pos = i + 1;
                str = '<td class="position">' + pos + '</td>';
                str += '<td class="name">' + ret.leaderboard[i].first_name + '&nbsp;' + ret.leaderboard[i].last_name + '</td>';
                str += '<td class="time">' + getTime(ret.leaderboard[i].time_taken) + '</td>';
                str += '<td class="points">' + ret.leaderboard[i].points + '</td>';
                //str += '<td>' + ret.leaderboard[i].last_name + '</td>';               
                //str += '<td>' + ret.leaderboard[i].incorrect_attempts + '</td>';
                //str += '<td>' + ret.leaderboard[i].user_id + '</td>';
                $('#leaderboard tbody').append('<tr>'+str+'</tr>');
            });
        },
        error: function (response) { alert(response.responseText); }
    });
}

HTML

    <table id="leaderboard">
        <thead>
            <tr>
                <th class="position">Position</th>
                <th class="name">Name</th>
                <th class="time">Time Taken</th>
                <th class="points">Points</th>
            </tr>
        </thead>
        <tbody> 
        </tbody>
    </table>
4

0 回答 0