从XML文件中分页的jQuery结果

Question

我有一个试图通过jQuery从XML文件分页的一些结果的问题点，基本上我需要显示10个杂志封面，当用户单击上一页或下一页时，另有10个显示，分别是什么被点击。下面是我的代码：

 $(document).ready(function() {

 $.ajax({
    type: "GET",
    url: "issues.xml",
    dataType: "xml",
    success: function(xml) {

                var startIndex = 0; // gets edited via ui
                var howMany = 10; // constant of how many per page, but you could make this a ui changeable thing too
                var $issues = $(xml).find('issue'); //the resulting issues from the xml
                var totalIssues = $issues.length;
    var numPages = Math.ceil(totalIssues / howMany)

    $('span.issuecount').html(+totalIssues+' Issues - '+numPages+' Pages');

                var displayIssues = function() { // display the issues
                      var $issuesPaginated = $issues.slice( startIndex , ($issues.length - startIndex) + howMany );
                      $('#shelf-items li').fadeOut(500); // clear old issues
                      $issuesPaginated.each(function(){
                          var id = $(this).attr('id');
                          var date = $(this).find('date').text();
                          var cover = $(this).find('cover').text();
                          var issue = $(this).find('issuenumber').text();
                          var url = $(this).find('url').text();
                          $('<li id="'+id+'"></li>').html('<a href="'+url+'"><img src="images/covers/'+cover+'" alt="" /></a><br />'+date+' - #'+issue+'').fadeIn(500).appendTo('#shelf-items');
                      });
                }

                $('#prevIssueButton').click(function() {
                    if( startIndex < howMany) {
                        startIndex -= howMany;
                        displayIssues().fadeIn(500);
                    }else {
                        alert('No more previous issues'); // probably want to do something more elegant here, like start over at 0, etc..
                    }
                });
                $('#nextIssueButton').click(function() {
      if( startIndex + howMany >= totalIssues) {
                        startIndex += howMany;
                        displayIssues();
                    }else {
                        alert('No more next issues'); // probably want to do something more elegant here, like start over at 0, etc..
                    }
                });
                displayIssues().fadeIn(500); // display for the first time (ajax call);
            }
   }); // end ajax call

}); // end document-ready

编辑:现在在displayIssues().fadeIn(500)上也有一个Javascript错误；

Answer 1

  $(xml).find('issue').each(function(){

可以变成：(使用.slice() )

  var startIndex = 0; //edit this via your ui
  var howMany = 10; 
  var $issues = $(xml).find('issue');
  var $issuesPaginated = $issues.slice( startIndex , ($issues.length - startIndex) + howMany );
  $issuesPaginated.each(function(){

你在服务器端使用什么东西吗？您能以这种方式促进分页，这样就不会将所有数据加载到DOM中吗？

有关点击处理程序的请求帮助：

$(document).ready(function() {

 $.ajax({
    type: "GET",
    url: "issues.xml",
    dataType: "xml",
    success: function(xml) {

                var startIndex = 0; // gets edited via ui
                var howMany = 10; // constant of how many per page, but you could make this a ui changeable thing too
                var $issues = $(xml).find('issue'); //the resulting issues from the xml
                var totalIssues = $issues.length;

                var displayIssues = function() { // display the issues
                      var $issuesPaginated = $issues.slice( startIndex , ($issues.length - startIndex) + howMany );
                      $('#shelf-items').html(''); // clear old issues
                      $issuesPaginated.each(function(){
                          var id = $(this).attr('id');
                          var date = $(this).find('date').text();
                          var cover = $(this).find('cover').text();
                          var issue = $(this).find('issuenumber').text();
                          var url = $(this).find('url').text();
                          $('<li id="'+id+'"></li>').html('<a href="'+url+'"><img src="images/covers/'+cover+'" alt="" /></a><br />'+date+' - #'+issue+'').appendTo('#shelf-items');
                      });
                }

                $('#prevIssueButton').click(function() {
                    if( startIndex < howMany) {
                        startIndex -= howMany;
                        displayIssues();
                    }else {
                        alert('No more previous issues'); // probably want to do something more elegant here, like start over at 0, etc..
                    }
                });
                $('#nextIssueButton').click(function() {
                    if( startIndex + howMany >= totalIssues) {
                        startIndex += howMany;
                        displayIssues();
                    }else {
                        alert('No more next issues'); // probably want to do something more elegant here, like start over at 0, etc..
                    }
                });
                displayIssues(); // display for the first time (ajax call);
            }
   }); // end ajax call

}); // end document-ready

Answer 2

我通常要处理跨越多个页面的大型数据集，因此我会在AJAX调用中包含索引参数。(这也需要在服务器端做一些聪明的事情...)在这种情况下，它看起来像是在调用一个静态xml文件，在这种情况下，我会放弃AJAX，或者让AJAX将结果转储到一个变量中，您可以在空闲时在自己的控制下迭代该变量。