Em breve eu terei que fazer uma pagina, onde seus itens carregam de 10 em 10, clicando no top 1, 2, 3, 4, etc… Bem parecido com o seu problema. Ainda não fiz, mas no meu projeto, esses itens chegam através de uma lista no formato JSON. Trato a lista com javascript e escrevo o HTML com os valores dos itens, como se cada item fosse um objeto. Cada objeto com suas Strings, Arrays, números, listas de links para imagens, e muitos outros dados.
O que poderíamos fazer?
-Poderíamos pegar o tamanho dessa lista, vamos supor que ela tem 45 itens. Dividir o tamanha por 10 (ou 20 se for de 20 em 20), e pegar apenas o numero inteiro, no caso 4. Com javascript, eu crio uma saida através de um loop até 4, onde vai criar uma variável HTML com o seguinte conteudo:
<ul class="topicoPaginacao" ><li value="1" >1</li><li value="2" >2</li>
<li value="3" >3</li><li value="4" >4</li></ul>
Com isso podemos criar uma função javascript, onde pega o valor de cada li, multiplica por 10, pegamos novamente a lista JSON, e extraímos apenas 10 tópicos por vez.
Por exemplo, vamos pensar em no menor e no maior array. Você primeiro multiplica o valor da li (clicada pelo usuário) por 10, para achar o valor maior. Como os itens serão mostrados apenas 10 por vez, o valor menor é o valor maior menos 10. A partir daqui é só escrever uma função javascript, que depois de receber o evento do click no tópico, ela pega sua lista JSON(que você trouce do seu servidor), extrai 10 itens da lista por vez, já gerando parte do seu HTML, para no fim gerar apenas um único texto com todo o conteúdo do HTML, que você vai imprimir em um determinado local da sua pagina HTML. Mais ou menos assim:
var maior=li.value*10;
var menor=maior-10;
var topicoHTML="";
for(int i=menor;i++;i<=maior) {
//Agora é só usar o i para pegar o numero do array
var iten="<div class=\"nome\">"+lista[i].get("nome")+"</div>";
iten+="<div class=\"preco\">"+lista[i].get("preco")+"</div>";
topicoHTML+="<div class=\"produto\" >"+iten+"</div>";
}
//Local onde o conteúdo será trocado, ou incrementado dependendo do tipo de navegação.
var imprimir=document.getElementById("produtos");
imprimir.innerHTML=topicoHTML;
Esse meu exemplo é uma lógica para TROCAR o conteúdo, de acordo um os tópicos que ele clica. Se for para incrementar, muda o fato de que o menor valor da lista, vai ser sempre o primeiro do seu array, no caso a posição 0.
Você pode usar a mesma lógica com a lista diretamente que o banco de dados enviou para o servidor. Apenas, passando o valor da li para seu servidor. Lá ele vai tratar e te retornar um array.