2

Estou criando um código de como paginar o conteúdo de uma new String(); com uso do Javascript, aviso antecipadamente, que é uma paginação em tempo de execução se comparada a uma paginação realizada por ASP ou PHP. Ela consiste em listar um certo número de linhas vinda da new String(); e torna a limpar a página para trazer as linhas seguintes da new String(); novamente.

No demais tudo perfeito, mas tende a apresentar um obstáculo, que impede retroceder de modo limpo, ao tentar voltar causa exibição de toda listagem anteriores.

Ja passei alguns dias alterando, ainda não consigo enxergar o quê posso corrigir.

Pondo o código, para que Execute e vejam este bug na hora de voltar a página anterior.

var i = 0;    
var j = 0;
var n = 0;      
var c = 0;

function mais(){
 i += 20; 

barra = texto.split("|");
document.getElementById('lista').innerHTML = ' ';
for ( x = n; x < i; x++ ){
  if(barra[x]){
document.getElementById('lista').innerHTML += "<br>"+barra[x]+"<br>";
	}
}
if (j) {n += 20}
}

function menos(){
 i -= 20; 

barra = texto.split("|");
document.getElementById('lista').innerHTML = ' ';
for ( x = 0; x < i; x++ ){
  if(barra[x]){
document.getElementById('lista').innerHTML += "<br>"+barra[x]+"<br>";
	}
}
}

function contador(){
c++;
document.getElementById('conta').value = c;
}

texto = 
// clique 1 - listagem 1
"|A|Titulo 01|Descrição 01|"+
"|B|Titulo 02|Descrição 02|"+
"|C|Titulo 03|Descrição 03|"+
"|D|Titulo 04|Descrição 04|"+
"|E|Titulo 05|Descrição 05|"+
// clique 2 - listagem 2
"|F|Titulo 06|Descrição 06|"+
"|G|Titulo 07|Descrição 07|"+
"|H|Titulo 08|Descrição 08|"+
"|I|Titulo 09|Descrição 09|"+
"|J|Titulo 10|Descrição 10|"+
// clique 3 - listagem 3
"|K|Titulo 11|Descrição 11|"+
"|L|Titulo 12|Descrição 12|"+
"|M|Titulo 13|Descrição 13|"+
"|N|Titulo 14|Descrição 14|"+
"|O|Titulo 15|Descrição 15|"+
// clique 4 - listagem 4
"|P|Titulo 16|Descrição 16|"+
"|Q|Titulo 17|Descrição 17|"+
"|R|Titulo 18|Descrição 18|"+
"|S|Titulo 19|Descrição 19|"+
"|T|Titulo 20|Descrição 20|"+
// clique 5 - listagem 5
"|U|Titulo 21|Descrição 21|"+
"|V|Titulo 22|Descrição 22|"+
"|W|Titulo 23|Descrição 23|"+
"|X|Titulo 24|Descrição 24|"+
"|Y|Titulo 25|Descrição 25|"+
"|Z|Titulo 26|Descrição 26|";
<div id="lista"></div>
<hr color=silver size=1>
<center>

<a onclick="menos();">&#171 Anterior</a>

&nbsp;
<input type="text" id="conta" name="isso"  size="1" />
&nbsp;
<a onclick="mais(j++);contador()">Próximo &#187</a> 

<hr color=silver size=1>

</center>

   

Ótimo, agora talvez você possa me ajudar a melhorar. Poste sua correção ou modificação.

function menos(){
i -= 20; 
barra = texto.split("|");
document.getElementById('lista').innerHTML = ' ';
for ( x = 0; x < i; x++ ){
if(barra[x]){
document.getElementById('lista').innerHTML += "<br>"+barra[x]+"<br>";
         }
     }
}

Tenho uma breve desconfiança que seja o laço for onde x = 0; teria que ser uma variável que acrescente ++ um valor númerico como o outro laço da função mais().

Bem, depois de diversas tentativas, fiquei perdido dando voltas em torno disto.

Aguardo respostas.

2 Respostas 2

1

Diego, acredito que estas informações venham de um arquivo, possivelmente um semelhante a este:

|A|Titulo 01|Descrição 01|
|B|Titulo 02|Descrição 02|
|C|Titulo 03|Descrição 03|
|D|Titulo 04|Descrição 04|
|E|Titulo 05|Descrição 05|
|F|Titulo 06|Descrição 06|
|G|Titulo 07|Descrição 07|
|H|Titulo 08|Descrição 08|
|I|Titulo 09|Descrição 09|
|J|Titulo 10|Descrição 10|
|K|Titulo 11|Descrição 11|
|L|Titulo 12|Descrição 12|
|M|Titulo 13|Descrição 13|
|N|Titulo 14|Descrição 14|
|O|Titulo 15|Descrição 15|
|P|Titulo 16|Descrição 16|
|Q|Titulo 17|Descrição 17|
|R|Titulo 18|Descrição 18|
|S|Titulo 19|Descrição 19|
|T|Titulo 20|Descrição 20|
|U|Titulo 21|Descrição 21|
|V|Titulo 22|Descrição 22|
|W|Titulo 23|Descrição 23|
|X|Titulo 24|Descrição 24|
|Y|Titulo 25|Descrição 25|
|Z|Titulo 26|Descrição 26|

Note que neste caso, linha representa um registro, então o melhor a se fazer é primeiro separar todos os registros usando um .split('\n');

agora que você tem um array com todas as linhas, você pode mapear a mesma para uma lista de registros, novamente você pode fazer um .split('|'); para cada linha e então acessar as informações pelo indice.

var arquivo = /* Conteudo do Arquivo */;
var registros = [];
arquivo.split('\n').forEach(function (linha, indice) {
  if (linha) {
    var itens = linha.split('|');
    var registro = {};
    registro.letra = itens[1];
    registro.titulo = itens[2];
    registro.descricao = itens[3];
    registros.push(registro);
  }
});

agora que você processou todos os registros, você tem que definir o tamanho de cada pagina e a quantidade de paginas, assim como os métodos de navegação.

então é só limpar o wrapper com o conteúdo dos registros e popular com o relacionado a pagina atual.

var atual = 1;
var pageSize = 7;
var pageCount = Math.ceil(registros.length / pageSize);
var action = {};
action.first = function () {
  action.exibir(1);
}
action.prev = function () {
  if (atual > 1) {
    action.exibir(atual - 1);
  }
}
action.next = function () { 
  if (atual < pageCount) {
    action.exibir(atual + 1);
  }
}
action.last = function () {
  action.exibir(pageCount);
}
action.exibir = function (pagina) {
  var inicio = pageSize * (pagina - 1);
  var final = inicio + pageSize;
  if (final > registros.length) 
    final = registros.length;

  /* Limpe a sua lista */
  for (indice = inicio; indice < final; indice++) {  
    /* Popule a sua lista; */
  }
}

agora segue o exemplo completo:

var srcs = document.querySelectorAll("[data-src]");
[].forEach.call(srcs, function (elem, indice) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.open("GET", elem.dataset.src, true);
  httpRequest.addEventListener("readystatechange", function () {  
    if (httpRequest.readyState == "4") {    
      var container = elem.parentElement;
      var svg = httpRequest.responseXML.querySelector("svg");
      container.insertBefore(svg, elem);
      container.removeChild(elem);
      svg.addEventListener("click", action[elem.dataset.action]);
    }
  });
  httpRequest.send();
});

var arquivo = document.getElementById("arquivo").innerHTML;
var registros = [];
arquivo.split('\n').forEach(function (linha, indice) {
  if (linha) {
    var itens = linha.split('|');
    var registro = {};
    registro.letra = itens[1];
    registro.titulo = itens[2];
    registro.descricao = itens[3];
    registros.push(registro);
  }
});

var main = document.querySelector("main");
var pagina = document.getElementById("pagina");

var pageSize = 7;
var pageCount = Math.ceil(registros.length / pageSize);
var action = {};
action.first = function () {
  action.exibir(1);
}
action.prev = function () {
  if (pagina.valueAsNumber > 1) {
    action.exibir(pagina.valueAsNumber - 1);
  }
}
action.next = function () {	
  if (pagina.valueAsNumber < pageCount) {
    action.exibir(pagina.valueAsNumber + 1);
  }
}
action.last = function () {
  action.exibir(pageCount);
}
action.exibir = function (pageNum) {
  pagina.value = pageNum; 

  var inicio = pageSize * (pagina.valueAsNumber - 1);
  var final = inicio + pageSize;
  if (final > registros.length) 
    final = registros.length;
    
  while (main.lastChild) {
    main.removeChild(main.lastChild);
  }    
  for (indice = inicio; indice < final; indice++) {  
    var registro = registros[indice];
    var h1 = document.createElement("h1");
    var h2 = document.createElement("h2");
    var h3 = document.createElement("h3");
    h1.textContent = registro.letra;
    h2.textContent = registro.titulo;
    h3.textContent = registro.descricao;
    main.appendChild(h1);
    main.appendChild(h2);
    main.appendChild(h3);
  }
}

action.first();
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: teal;
  box-shadow: 0px 0px 10px black;
  z-index: 2;
}

main {
  position: absolute;
  width: 100%;
  top: 40px;
  bottom: 0px;
  overflow: auto;
  z-index: 1;
  background-color: whitesmoke;
}

.esquerda {
  float: left;
}

.centro {
  float: left;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);  
}

#pagina {
  position: relative;
  width: 32px;
  line-height: 32px;
  padding: 0px 2px;
  margin: 4px;
  border: 0px none transparent;
  bottom: 0px;
  text-align: center;
  font-size: 24px;
  background-color: whitesmoke;
}

svg {
  margin: 2px;
  width: 36px;
  height: 36px;
  fill: whitesmoke;    
}

h1, h2, h3 {
  background-color: whitesmoke;
  box-shadow: 0px 2px 5px -2px black;
}
<header>
  <div class="centro">
    <div class="esquerda">
      <img data-action="first" data-src="https://image005.flaticon.com/1/svg/60/60769.svg" />
      <img data-action="prev" data-src="https://image005.flaticon.com/1/svg/60/60573.svg" />
    </div>  
    <div class="esquerda">
      <input id="pagina" type="number" readonly />
    </div>  
    <div class="esquerda">
      <img data-action="next" data-src="https://image005.flaticon.com/1/svg/60/60615.svg" />
      <img data-action="last" data-src="https://image005.flaticon.com/1/svg/60/60678.svg" />
    </div> 
  </div>
</header>
<main> 

</main>

<template id="arquivo">
|A|Titulo 01|Descrição 01|
|B|Titulo 02|Descrição 02|
|C|Titulo 03|Descrição 03|
|D|Titulo 04|Descrição 04|
|E|Titulo 05|Descrição 05|
|F|Titulo 06|Descrição 06|
|G|Titulo 07|Descrição 07|
|H|Titulo 08|Descrição 08|
|I|Titulo 09|Descrição 09|
|J|Titulo 10|Descrição 10|
|K|Titulo 11|Descrição 11|
|L|Titulo 12|Descrição 12|
|M|Titulo 13|Descrição 13|
|N|Titulo 14|Descrição 14|
|O|Titulo 15|Descrição 15|
|P|Titulo 16|Descrição 16|
|Q|Titulo 17|Descrição 17|
|R|Titulo 18|Descrição 18|
|S|Titulo 19|Descrição 19|
|T|Titulo 20|Descrição 20|
|U|Titulo 21|Descrição 21|
|V|Titulo 22|Descrição 22|
|W|Titulo 23|Descrição 23|
|X|Titulo 24|Descrição 24|
|Y|Titulo 25|Descrição 25|
|Z|Titulo 26|Descrição 26|  
</template>

-2

Após revisar meu código da pergunta, fiz as devidas correções:

Na função menos(), bastou substituir as variáveis 0 por i e i por n

  • Antes - for ( x = 0; x < i; x++ ) {
  • Depois - for (x = i; x < n; x++) {

Feito esta troca, a paginação funcionou perfeitamente.


E melhorei a estética visual do controle de paginação.

Coloquei a propriedade readonly(somente leitura) no campo input type='text'. E aproveitei cada função existente mais() e menos() e apliquei o contador dentro de cada uma delas, além de inserir também uma condição de fluxo if..else para desabilitar (ou melhor ocultar) os links Anterior e Próximo ao chegar no limite da contagem inicial e/ou final.

Isto me levou apagar a função contador() que antes fazia a contagem. Agora passou a estar tudo integrado.

Com essas mudanças realizadas, a variável j deixou de ser necessária.

  • var j = 0;

E para apresentar a o resultado da paginação, assim que o carregamento do documento HTML esteja completo, foi criado uma função pós-carregamento:

  • window.onload = function() { mais(); document.getElementById('menos').style.display = "none"; }

Agora, posto como resposta para complementar a que ja foi dada.

i = 0;
n = 0;
c = 1;

function mais() {

  i += 20;

  barra = texto.split("|");
  document.getElementById('lista').innerHTML = ' ';

  for (x = n; x < i; x++) {

    if (barra[x]) {
      document.getElementById('lista').innerHTML += "<br>" + barra[x] + "<br>";
    }
  }

  n += 20;
  document.getElementById('conta').value = c;

  if (c == 6) {
    menos();
    document.getElementById('mais').style.display = "none";
  } else {
    document.getElementById('menos').style.display = "inline-block";
  }
}


function menos() {

  i -= 20;

  barra = texto.split("|");
  document.getElementById('lista').innerHTML = ' ';

  for (x = i; x < n; x++) {

    if (barra[x]) {
      document.getElementById('lista').innerHTML += "<br>" + barra[x] + "<br>";
    }
  }

  n -= 20;
  document.getElementById('conta').value = c;

  if (c == 1) {
    mais();
    document.getElementById('menos').style.display = "none";
  } else {
    document.getElementById('mais').style.display = "inline-block";
  }
}

texto =

  // clique 1 - listagem 1
  "|A|Titulo 01|Descrição 01|" +
  "|B|Titulo 02|Descrição 02|" +
  "|C|Titulo 03|Descrição 03|" +
  "|D|Titulo 04|Descrição 04|" +
  "|E|Titulo 05|Descrição 05|" +

  // clique 2 - listagem 2
  "|F|Titulo 06|Descrição 06|" +
  "|G|Titulo 07|Descrição 07|" +
  "|H|Titulo 08|Descrição 08|" +
  "|I|Titulo 09|Descrição 09|" +
  "|J|Titulo 10|Descrição 10|" +

  // clique 3 - listagem 3
  "|K|Titulo 11|Descrição 11|" +
  "|L|Titulo 12|Descrição 12|" +
  "|M|Titulo 13|Descrição 13|" +
  "|N|Titulo 14|Descrição 14|" +
  "|O|Titulo 15|Descrição 15|" +

  // clique 4 - listagem 4
  "|P|Titulo 16|Descrição 16|" +
  "|Q|Titulo 17|Descrição 17|" +
  "|R|Titulo 18|Descrição 18|" +
  "|S|Titulo 19|Descrição 19|" +
  "|T|Titulo 20|Descrição 20|" +

  // clique 5 - listagem 5
  "|U|Titulo 21|Descrição 21|" +
  "|V|Titulo 22|Descrição 22|" +
  "|W|Titulo 23|Descrição 23|" +
  "|X|Titulo 24|Descrição 24|" +
  "|Y|Titulo 25|Descrição 25|" +
  "|Z|Titulo 26|Descrição 26|";

window.onload = function() {
  mais();
  document.getElementById('menos').style.display = "none";
}
#conta {
  padding: 5px;
  cursor: pointer;
  text-align: center;
}
<center>

  <div id="lista"></div>

  <hr color="silver" size="1" />

  <a onclick="menos(c--);" id="menos">&#171 Anterior</a> &nbsp;

  <input type="text" id="conta" name="isso" size="1" readonly /> &nbsp;

  <a onclick="mais(c++);" id="mais">Próximo &#187</a>

  <hr color="silver" size="1" />

</center>

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 .