来自 XML 文件的分页 jQuery 结果答案

【问题标题】：Paginated jQuery results from XML file来自 XML 文件的分页 jQuery 结果
【发布时间】：2010-06-29 21:14:16
【问题描述】：

我在尝试通过 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+'&nbsp;Issues - '+numPages+'&nbsp;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 错误；

【问题讨论】：

标签： javascript jquery xml pagination

【解决方案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

【讨论】：

嗨，丹，不幸的是，这没有奏效。它现在显示为空白，我如何控制带有下一个/上一个链接的页面？
是的，进行了快速编辑 - 它需要再次成为 jquery 对象的拼接方法。但更好的是，我使用了.slice() 方法并为你输入了数学
XML 文件中只会包含少量数据，这不是供公众查看的，仅限私人客户使用 - 因此 DOM 负载无关紧要。效果很好，丹，非常感谢您的帮助！我只需要知道如何将 Prev+Next 页面操作附加到我设置的那些按钮上？
我会在 $(document).ready() 内部但在 ajax 调用之外的变量中创建您的 startIndex，生成 $issues 和总 $issues。然后仍然在$(document).ready() 中，您可以将点击事件绑定到上一个/下一个按钮并更改您的 startIndex，重新显示元素，限制基于总元素（例如，在结束时禁用下一个按钮）..跨度>
对不起，Dan，你可能知道有点 jQuery 菜鸟，我不知道写出这些变量，我将能够执行点击功能，你能帮我吗？请？ :)

【解决方案2】：

我通常处理跨越多个页面的大型数据集，因此我在 AJAX 调用中包含索引参数。（这也需要服务器端的智能......）在你的情况下，它看起来像你正在调用一个静态 xml 文件，在这种情况下，我会放弃 AJAX 或让 AJAX 将结果转储到你的变量中可以在您的空闲时间和您的控制下进行迭代。

【讨论】：