加载的表排序中只有最后一个AJAX请求 [英] Only last AJAX request in loaded table sorts

问题描述

针对此问题我创建了以下示例解决方案: http://jsfiddle.net/PKcnb/3/ .

For this question I created the following example solution: http://jsfiddle.net/PKcnb/3/.

该代码通过YouTube API请求50个视频(由于请求限制).每个请求都将一个新行附加到最终表中.我想要一个简单的排序解决方案，所以我使用了jquery.sortElements.js.

The code requests 50 videos (due to request limitations) via the YouTube API. Each request appends a new row to the final table. I wanted a simple sorting solution so I used jquery.sortElements.js.

sortElement.js似乎可以正常工作，但它只是对最后一次发出的请求中的视频进行排序.为什么整个表都没有排序?到处搜索，看来我需要实现.live()，但是我的尝试没有成功.

sortElement.js appears to work but it is only sorting the videos from the last request made. Why isn't the whole table sorted? Searching around, it looks like I need to implement .live() but my attempts have been unsuccessful.

相关JQuery

// Recursive function to grab the next set of videos
function getVideos(index, max) {
    $.ajax({
        url: 'https://gdata.youtube.com/feeds/api/playlists/UUAuUUnT6oDeKwE6v1NGQxug?v=2&orderby=duration&max-results=50&start-index=' + index,
        //  'https://gdata.youtube.com/feeds/api/users/tedtalksdirector/uploads',
        dataType: "xml",
        success: function(xml) {
            var videos = $(xml).find("entry");

            videos.each(function() {
                var title = $(this).find("title").text();
                var duration = $(this).find("duration").attr("seconds");
                var minutes = Math.floor(duration / 60);
                var seconds = (duration % 60);

                if (seconds < 10) seconds = "0" + seconds;

                var newRow = $("<tr></tr>");
                newRow.append("<td>" + title + "</td>");
                newRow.append("<td class='dur'>" + duration + "</td>");
                $("tbody#videos").append(newRow);

            });

            newIndex = index + 50;

            $('#VideosLoaded').html(newIndex - 1);

            if (newIndex < max) {
                getVideos(newIndex, max);
            }
        }
    });
}

// Make table sortable (jquery.sortElements.js)
// via https://stackoverflow.com/questions/5066002/sending-one-ajax-request-at-a-time-from-a-loop
var table = $('table');
$('#Title, #Duration').wrapInner('<span title="sort this column"/>').each(function() {

    var th = $(this),
        thIndex = th.index(),
        inverse = false;

    th.click(function() {

        table.find('td').filter(function() {

            return $(this).index() === thIndex;

        }).sortElements(function(a, b) {

            return $.text([a]) > $.text([b]) ? inverse ? -1 : 1 : inverse ? 1 : -1;

        }, function() {
            // parentNode is the element we want to move
            return this.parentNode;
        });
        inverse = !inverse;
    });
});​

推荐答案

我认为排序例程会像这样更好地工作:

I think the sort routine will work better like this :

$('#Title, #Duration').wrapInner('<span title="sort this column"/>').each(function() {
    var th = $(this),
        thIndex = th.index(),
        inverse = false;
    th.click(function() {
        table.find('td').filter(function() {
            return $(this).index() === thIndex;
        }).sortElements(function(a, b) {
            var id = th.attr('id'),
                a = (id === 'Duration') ? parseInt($(a).text()) : $(a).text(),
                b = (id === 'Duration') ? parseInt($(b).text()) : $(b).text(),
                x = (a === b) ? 0 : (a > b) ? 1 : -1;
            return (x === 0) ? 0 : inverse ? -x : x;
        }, function() {
            return this.parentNode;     
        });
        inverse = !inverse;
    });
});

更新了小提琴

这篇关于加载的表排序中只有最后一个AJAX请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！