Creating Paging in Strings with Javascript

Navigation
2

I'm creating a code for paging the contents of a new String(); with Javascript, warning in advance, which is a run-time paging compared to a pagination performed by ASP or PHP. It consists of listing a certain number of rows from new String(); and reopens the page to bring the next rows from new String(); back.

In everything else perfect, but tends to present an obstacle, which prevents backing off cleanly, while trying to return cause view of all previous listing.

I've been changing a few days, I still can not see what I can fix.

Putting the code to Run and see this bug at the time of 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 mistrust that is the loop for where x = 0; would have to be a variable that adds ++ a numeric value like the other loop function of the mais() function.

     

Well, after several attempts, I got lost wandering around it.

I await answers.

    
asked by anonymous 22.05.2016 / 21:12

1 answer

1

Diego, I believe this information comes from a file, possibly a file 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 to first separate all records using a .split('\n');

Now that you have array with all rows, you can map it to lista registros , again you can .split('|'); for each row and then access the information by index. 

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 the records, you have to define the size of each page and the number of pages, as well as the navigation methods.

Then just clean the wrapper with the contents of the records and popular with the one 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 complete 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"/><imgdata-action="prev" data-src="https://image005.flaticon.com/1/svg/60/60573.svg"/></div><divclass="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"/><imgdata-action="last" data-src="https://image005.flaticon.com/1/svg/60/60678.svg"/></div></div></header><main></main><templateid="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>
    
23.05.2016 / 00:43
How do I get json response in javascript / jquery? Conflict onFling with onSingleTapUp in GestureDetector