Creating String Paging with Javascript

Question

I’m creating a code for how to paginate the contents of a new String(); using Javascript, notice in advance, which is a runtime pagination compared to a pagination performed by ASP or PHP. It consists of listing a certain number of lines coming from new String(); and again clear the page to bring the following lines from the new String(); again.

Otherwise everything perfect, but tends to present an obstacle, which prevents back in a clean way, while trying to return cause display of all previous listing.

I’ve spent a few days changing, I still can’t see what I can fix.

Putting the code, so that Run and see this bug when returning to the previous page.

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>

   

Great, now maybe you can help me improve. Post your correction or modification.

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>";
         }
     }
}

I have a brief suspicion that noose for where x = 0; would have to be a variable that adds ++ a numerical value like the other noose of function mais().

Well, after several attempts, I was lost spinning around this.

I await answers.

Answer 1

Diego, I believe this information comes from a file, possibly one similar to this:

|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 that in this case, row represents a record, so the best thing to do is first to separate all records using a .split('\n');

now that you have a array with all lines, you can map the same to a lista of registros, again you can make a .split('|'); for each line and then access the information via the 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);
  }
});

now that you have processed all records, you have to define the size of each page and the number of pages, as well as the navigation methods.

then just clear the wrapper with the contents of the records and popular with related to the current page.

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; */
  }
}

now follow the full example:

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>