來自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 JavaScript錯誤（）淡入（500）。

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轉儲結果到一個變量，你可以在您的閒暇時間和在您的控制下迭代。