Показать 10 Jquery объектов в то время

Question

У меня есть сайт, который будет содержать 100s объектов, которые имеют следующий вид:

function Products (type, title, description, cost, image){ 
this.type = type; 
this.title = title; 
this.description = description; 
this.cost = cost; 
this.image = image; 
this.displayInfo = function(){ 
    var info ="<div class='p-image'>"; 
     info += this.image + "</div><div class='p-title'>"; 
     info += this.title + "</div><div class='p-cost'>"; 
     info += "Online Product Cost: $" + this.cost + "</div><div class='p-desc'>"; 
     info += "<strong>DESCRIPTION:</strong> " + this.description + "</div>"; 

    return info; 
} 
} 


// define an array to store products 
var product_list = []; 

var im = "<img src='http://ecx.images-amazon.com/images/I/911wQX4ahaL._SL1500_.jpg' id = 'image'>"; 
var desc = "<br><span style = 'font-weight: bold; padding-top: 10px;'>Developer: </span>Teyon<br> <span style = 'font-weight: bold;'>Platforms: </span>PS3, WIN, X360<br> <span style = 'font-weight: bold;'>Release Date: </span>2013</br><span id = 'para'> Sequel to Heavy Fire: Afghanistan, in which soldiers are sent after a captured spy who holds the plans to a secret Iranian nuclear weapons facility.</span>"; 
var product = new Products('v fps win xbone ps3','Heavy Fire: Shattered Spear',desc, 10.00, im); 
product_list.push(product); 

var im = "<img src='http://upload.wikimedia.org/wikipedia/en/c/c5/AliensColonialMarinesBox.png' id = 'image'>"; 
var desc = "<br><span style = 'font-weight: bold;'>Developer: </span>Gearbox Software<br> <span style = 'font-weight: bold;'>Platforms: </span>PS3, WIN, X360<br> <span style = 'font-weight: bold;'>Release Date: </span>2013</br><span id = 'para'>True sequel to James Cameron's film, the story of Aliens: Colonial Marines takes place nearly 17 weeks after the events of Alien 3 and almost 199 years prior to the events of Alien Resurrection, as the cryotubes containing Ellen Ripley, Corporal Hicks, Newt, and the android Bishop had ejected from the Sulaco. </span>"; 
product_list.push(new Products('v fps','Aliens: Colonial Marines',desc, 10.00, im)); 

displayProducts(); 

function displayProducts() { 

    for (var i=0; i<product_list.length; i++){ 
    //product_list[i].type can determine which are chosen 
     var divrow = "<div class='list "+ product_list[i].type + "' data-index='" +i+ "' >"; 
     divrow += product_list[i].displayInfo() + "</div>" 
    $('#main-list').append(divrow); 
    //tried append to '#list' and '.list' but didn't work either so made main-list div 
    } 
} 

........

Когда они показывают, как только загрузка страницы - это все сразу. Таким образом, «высота» моей страницы огромна. Я хочу, чтобы список упал с 100 до 10 показов за раз. Подобно тому, как Google показывает свой веб-сайт:

Я никогда не делал эту версию .show(), прежде чем это мне было интересно, как это сделать. Я просто хочу, чтобы они динамически обновлялись на странице, потому что у меня есть таблица корзины покупок на той же странице. Любые идеи или предложения?

Мой сайт до сих пор выглядит следующим образом:

Answer 1

Вот a functioning sample, чтобы вы начали. Вот Релевент код из него:

HTML:

<div id="main-list"></div> 
<div id="pager"></div> 

CSS:

.hidden{ 
    display:none; 
} 

Javascript:

//set a variable to track the number of pages 
var pageCount = 0; 

function displayProducts() { 
    //create a container 'page' 
    var page = $('<div class="page"/>'); 

    //parse your data array 
    for (var i = 0; i < product_list.length; i++) { 
     //create the item div 
     var divrow = "<div class='list " + product_list[i].type + "' data-index='" + i + "' >"; 
     divrow += product_list[i].displayInfo + "</div>" 
     //append it to the 'page 
     page.append(divrow); 

     //if we reach 10 items (or the end of the list), add the 'page' to the doc, and reset the page variable 
     if ((i + 1) % 10 == 0 || i == product_list.length-1) { 
      //add page 
      $('#main-list').append(page); 
      //increase page count 
      pageCount++; 
      //reset the page variable to a new blank 'page' div 
      page = $('<div class="page hidden"/>'); 
     } 
    } 

    //simple pager anchor elements 
    for (var j = 0; j < pageCount; j++) { 
     //using data-page attribute to refer to the 0 based index 
     $('#pager').append('<a href="#" data-page="' + j + '">' + (j + 1) + '</a>&nbsp;'); 
    } 
} 
//hide all pages then show the one that equals the 'data-page' index 
$('#pager').on('click', 'a', function (e) { 
    $('.page').addClass('hidden').eq($(this).attr('data-page')).removeClass('hidden'); 
}); 

НТН -Ted