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

本文介绍了加载的表排序中只有最后一个AJAX请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

For this question I created the following example solution: jsfiddle/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: 'gdata.youtube/feeds/api/playlists/UUAuUUnT6oDeKwE6v1NGQxug?v=2&orderby=duration&max-results=50&start-index=' + index, // 'gdata.youtube/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 stackoverflow/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; }); });

更新了小提琴