Além da vantagem de não precisar carregar mais itens que o necessário, o usuário também não perde de vista os posts que já estavam carregados quando os novos são exibidos. Este é um problema que acontece naquele conhecido modelo de paginação com os links das páginas e os de próxima página e página anterior.

O objetivo é carregar somente o número de mensagens que preencha o espaço na tela do usuário e, caso o usuário baixe até o final a barra de rolagem, o sistema carregue novas mensagens, mantendo na tela as anteriores. 

No exemplo deste artigo, você pode ver na prática como funciona este modelo de paginação. Se preferir, baixe os códigos fontes para fazer seus estudos e alterações.

Como funciona? 

Não vou me aprofundar explicando a utilização da classe Ajax utilizada no projeto, deixo isso para um futuro post. No momento, veremos as funções essenciais do exemplo, e a primeira delas é a função addLine(), que insere (via DOM) uma nova linha no div dos itens.

A função recebe como parâmetro um objeto contendo os atributos id e text e monta a linha que será inserida logo em seguida. Note que a função também controla a variável global id que será passada como parâmetro em todas as requisições dos notos itens. No nosso caso, apenas para que cada mensagem tenha um número maior que a anterior.

As funções paginationComplete() e pagination() são as responsáveis por fazer as requisições das próximas mensagens.

A função onScroll() verifica se a barra de rolagem está no rodapé da página. Se estiver, executa a função pagination(), que como vimos, fará a requisição das novas mensagens.

A função init() é quem chama pela primeira vez a função pagination(). Ela também atribui aos eventos window.onscroll e window.onresize, para que no sistema faça requisições sempre que ainda tiver espaço para novas mensagens.

Onde utilizar o método?

Utilizei este método (e estes mesmos códigos) em um sistema de monitoramento de mensagens, onde o usuário abria a tela de via as últimas mensagens, e conforme ia baixando a tela as mensagens antigas eram carregadas (até que não houvessem mais mensagens antigas no banco). Outro sistema de refresh fazia as requisições das novas mensagens, que eram exibidas no topo. Com isso consegui um bom sistema de monitoramento em tempo real de mensagens, e que ao mesmo tempo era prático para visualizar mensagens antigas.

Você pode usar sua imaginação para utilizar estes códigos em seus projetos. Acho que é um bom exemplo de se usar em sistemas de mensagens, leitor de e-mails, agregador de feeds rss, e em qualquer lugar onde o método convencional de paginação não é a melhor opção.

Considerações finais

Testei o exemplo no Firefox e no IE 7, portanto, se você encontrar algum erro por favor me avise que eu corrijo.

Se tiver dúvidas ou quiser fazer algum comentário sobre o artigo e o exemplo, sinta-se à vontade para utilizar o formulário de comentários abaixo ou então acompanhar a discussão no fórum.

Divirta-se!

Exemplo | Download

Um bom exemplo seria em um cadastro de vendedor, o usuário deve selecionar as cidades que aquele vendedor atua. Numa list, aparece todas as cidades cadastradas. Na outra, só as seleiconadas para aquele vendedor.

Em primeiro lugar, teremos 2 lists: listOrigem e a listDestino.

<select name="listOrigem" id="listOrigem" MULTIPLE size="10">
<option value="1">Porto Alegre</option>
<option value="2">São Paulo</option>
<option value="3">Rio de Janeiro</option>
<option value="4">Natal</option>
<option value="5">Fortaleza</option>
</select>

<select name="listDestino" id="listDestino" MULTIPLE size="10">
</select>

e quatro simples funções, facilmente adaptáveis para o uso em outras situações:

//1. Para passar todos os ítens da list de origem para a de destino:

function allLeft2Right() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listOri.length; i++) {
    var opcao = listOri.options[i];
    var novaOpcao = new Option(opcao.text, listDest.length);
    novaOpcao.value = opcao.value;
    listOri.remove(i);
    try {
      listDest.add(novaOpcao,null);
    } catch (e) {
      listDest.add(novaOpcao);
    }
    i--;
  }
}

//2. função para passar todos os ítens do destino para a origem:

function allRight2Left() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listDest.length; i++) {
    var opcao = listDest.options[i];
    var novaOpcao = new Option(opcao.text, listOri.length);
    novaOpcao.value = opcao.value;
    listDest.remove(i);
    try {
      listOri.add(novaOpcao,null);
    } catch (e) {
      listOri.add(novaOpcao);
    }
    i--;
  }
}

//3. Função para apenas os ítens selecionados da origem para o destino:

function left2Right() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listOri.length; i++) {
    var opcao = listOri.options[i];
    if(opcao.selected) {
      var novaOpcao = new Option(opcao.text, listDest.length);
      novaOpcao.value = opcao.value;
      listOri.remove(i);
      try {
        listDest.add(novaOpcao,null); //Firefox
      } catch(e) {
        listDest.add(novaOpcao); //IE
      }
      i--;
    }
  }
}

//4. e por último, para passar os ítens marcados do destino para a origem

function right2Left() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listDest.length; i++) {
    var opcao = listDest.options[i];
    if(opcao.selected) {
      var novaOpcao = new Option(opcao.text, listOri.length);
      novaOpcao.value = opcao.value;
      listDest.remove(i);
      try {
        listOri.add(novaOpcao,null);
      } catch (e) {
        listOri.add(novaOpcao);
      }
      i--;
    }
  }
}

Exemplo funcionando:

Agora é só vc adaptar. Se preferir que no OnDblClick no combo de origem passar para o destino, é só colocar no OnDblClick do listOrigem a chamada ao left2Right. Poderia criar dois botões também para passar todos os ítens de um campo para o outro.

Bom, espero ter ajudado. Muitas vezes já procurei um artigo como esse, com exemplos na WEB, porém não encontrei. Então fica aqui minha contribuição.

Para utilizar a classe, basta importar o arquivo js e instanciar um objeto que estará associado à sua lista. Feito isso você pode criar seus próprios links para manipular os eventos de ordenação da lista (mover para cima ou para baixo). Veja o exemplo abaixo:

var bozo;

function init() { bozo = new SortableList($('list')); } //<ul id="list">

window.onload = init;

Ao instanciar o SortableList você também pode definir duas opções interessantes:

• A primeira é o “rotate”, que define se os itens vão girar ou não (true ou false), ou seja, se o primeiro da lista vai para baixo quando o usuário clicar para cima, e vice-versa, quando o último item se torna o primeira ao clicar para baixo.
• E a segunda é o onComplete, onde você pode setar uma função que será executada toda vez que a lista for reordenada. Nesta função você pode, por exemplo, fazer uma requisição Ajax que salvará a ordenação no seu banco de dados, onde você pode, para isso, acessar o atributo “list“, que contém a lista ordenada.

Exemplo | Download