Результаты jQuery с разбивкой по страницам из файла XML

Question

У меня возникают проблемы с попыткой разбить на страницы некоторые результаты из XML-файла через jQuery, в основном мне нужно отобразить 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

edit: теперь также есть ошибка Javascript в displayIssues (). FadeIn (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 сбрасывает результаты в переменную, которую вы может перебирать на досуге и под вашим контролем.