2

Eu gostaria de montar um sisteminha que fizesse a paginação automaticamente apenas com o jQuery/JavaScript com os rows que recebo.

O Servidor pode me retornar 1 row como pode me retornar 1 milhão, e o jQuery precisa organizar esses rows ocultando todos os rows menos os últimos 2. Por exemplo ele me retorna esses 5 rows

<div class="MSGR">Bom dia</div> --> NAO MOSTRAR
<div class="MSGR">Bom dia</div> --> NAO MOSTRAR
<div class="MSGR">Bom dia</div> --> NAO MOSTRAR
(ainda tem 3 opçoes SR.USUARIO)
<div class="MSGR">Bom dia</div> --> MOSTRAR
<div class="MSGR">Bom dia</div> --> MOSTRAR

Ele vai mostrar os últimos 2 rows e o resto vai simplesmente esconder.

Acima dos rows mostrados deve existir um botao para mostrar MAIS rows.. um "load more" que mostra de dois em dois sempre mostrando quantos rows ainda faltam para ser exibido... Esse botao de load more deve existir enquanto existir rows, quando todos forem exibidos ela nao tem mais função e deve ser ocultada.. Tipo o Messenger do facebook que voce puxa as mensagens de cima para baixo e é exibido de X em X mensagens até acabar.

6

1 Resposta 1

2

Aqui fica uma sugestão sem jQuery. Se quiseres podes adaptar mas não fica melhor só por ser jQuery.

Usa CSS transitions para mostrar o contudo e uma variável qua decreesce o indice do ultimo numero mostrado cada vez que chama mais linhas.

Estou a usar elementos básicos do JavaScript e removendo a classe hidden com o .classList.remove('nomedaclasse');

var divs = [];

// pedaço para montar conteudo
for (var i = 0; i <= 20; i++) {
    var div = document.createElement('div');
    div.innerHTML = 'Linha ' + i;
    div.classList.add('MSGR', 'hidden');
    document.body.appendChild(div);
    divs.push(div);
}

// função que retira a classe hidden
function mostrarDesde(elementos, indice, qtd) {
    if (!qtd) qtd = 2; // no caso de um dia queres mudar quantas mostra cada vez
    for (var i = indice; i < indice + qtd; i++) {
        if (elementos[i]) elementos[i].classList.remove('hidden');
    }
}

var indiceVisivel = divs.length - 2;
mostrarDesde(divs, indiceVisivel);

document.querySelector('button').addEventListener('click', function () {
    mostrarDesde(divs, indiceVisivel = indiceVisivel - 2);
    if (indiceVisivel < 0) this.classList.add('hidden'); // para esconder o input no fim
});
.MSGR {
    height: 20px;
    transition: all .5s;
}
.hidden {
    height:0;
    opacity:0;
}
<button type="button">Mostrar mais</button>

jsFiddle: http://jsfiddle.net/hqsa742c/1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .