Organize content and make "pagination"

Navigation
2

I would like to set up a system that would automatically paginate just jQuery / JavaScript with the rows I get.

The server can return 1 row as it can return me 1 million, and jQuery needs to organize those rows by hiding all the rows minus the last 2. For example it returns me those 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

It will show the last 2 rows and the rest will simply hide.

Above the rows shown there should be a button to show MORE rows .. a "load more" that shows two by two always showing how many rows are still to be displayed ... This load more button must exist as long as rows exist , when they are all displayed it has no function and should be hidden .. Type the facebook Messenger that you pull the messages from top to bottom and is displayed from X in X messages until finished.

    
asked by anonymous 02.07.2015 / 03:14

1 answer

2

Here is a suggestion without jQuery. If you want you can adapt but it does not get better just for being jQuery.

Use CSS transitions to show the however and a variable that decreases the index of the last number shown each time you call more lines.

I'm using basic JavaScript elements and removing the hidden class with .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: link

    
02.07.2015 / 08:43
How to compare dates coming from a CSV file in Ruby Does Eclipse LogCat for Android display Log messages?