Organize contents and make "pagination"

Asked

Viewed 103 times

2

I would like to assemble a system that automatically does the paging with only the jQuery/Javascript with the Rows I get.

The Server can return me 1 Row as it can return me 1 million, and jQuery needs to organize these Rows by hiding all Rows except the last 2. For example it returns me these 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 shown Rows there must be a knob to show MORE Rows.. a "load more" that shows two by two always showing how many Rows are left to display... This load more button must exist as long as Rows exist, when all are displayed it has no function and must be hidden.. Type the Facebook Messenger that Voce pulls messages from top to bottom and is displayed from X to X messages until finished.

jquery

  • How would it be just 2 out of 2?

  • @Maiconcarraro showed two Ivs but still 5 he will only show two of these five is so will..

  • possible duplicate of Show/hide each element within a toggle class (jquery)

  • @Maiconcarraro doesn’t have much sense, it has to do with it but it’s not, it’s a pagination and not a "menu"

  • but the basis is the same, no?

  • @Maiconcarraro I believe that it is not necessary to organize the received Rows and work with them and not work with fixed points. See the edition.

Show 1 more comment

1 answer

2


Here is a suggestion without jQuery. If you want you can adapt but it is not better just because it is jQuery.

Uses CSS Transitions to show the however and a variable that decreases the number of the last number shown each time it calls more lines.

I’m using basic Javascript elements and removing the class hidden with the .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

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.