0

この質問に対して、次のサンプル ソリューションを作成しました: http://jsfiddle.net/PKcnb/3/。

このコードは、YouTube API を介して (リクエストの制限により) 50 本の動画をリクエストします。リクエストごとに新しい行が最終テーブルに追加されます。シンプルなソート ソリューションが必要だったので、jquery.sortElements.js を使用しました。

sortElement.js は機能しているように見えますが、最後に行われたリクエストからの動画のみを並べ替えています。テーブル全体がソートされないのはなぜですか? 周りを検索すると、.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;
    });
});​
4

1 に答える 1

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;
    });
});

更新されたフィドル

于 2012-12-31T18:43:47.047 に答える