Question

For this question我创建了以下示例解决方案：http://jsfiddle.net/PKcnb/3/。

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

sortElement.js似乎有效但它只是对上次发出的请求中的视频进行排序。为什么不对整个表进行排序？在四处搜索，看起来我需要implement .live()，但我的尝试都没有成功。

相关的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;
    });
});

Answer 1

我认为排序例程会更好地运行：

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

Updated fiddle

只有加载表中的最后一个AJAX请求排序

1 个答案: