How you could hide too many paging numbers

Navigation
2

I have the source code already written. Check below: 

var str = "ABCDEFGHIJKLMNOPQRSTUVXWYZ"

var link = [];

for(var i = 0; i < str.length; i++)
{
var letra = str.charCodeAt(i) - 64;
link[i] = "<a href='base/dados/"+ letra +".html' target='resultado'>" + (i+1) + "</a>";  
}

document.getElementById("listagem").innerHTML = link.join("&nbsp;");

window.onload = document.getElementsByTagName('a')[0].className="hover"

var pag = document.getElementsByTagName('a')

var contar = 0; 

function troca(i) {
if (i == 'e') {
if (contar > 0) {
  pag[contar].className = ""
  contar--;
  pag[contar].className += "hover";
 }
 } else {
 if (contar < pag.length - 1) {
  pag[contar].className = ""
  contar++;
  pag[contar].className += "hover";
 }
 }
 }
 a { 

 text-decoration: none;
 cursor: pointer;
 padding: 1px 4px 1px 4px; 
 color: black; 

 }

 a.hover { 

 color:red; 
   	 font-weight: bolder;
   	 background-color: red;
   	 color: white;

 }

 a:hover { 

 color:red; 
   	 font-weight: bolder;
   	 background-color: red;
   	 color: white;

 }

.seta {

  	cursor: pointer;

}
<div id="resultado"></div>

<button onclick="troca('e')" id="menos" class="seta">&#171</button>

<span id="listagem"></span>

<button onclick="troca('d')" id="mais" class="seta">&#187</button>

But there was a need to show only the four first paging numbers, thus leaving it:

< 1 2 3 4 >

The rest is hidden. So when you click on next previous you should go dropping and showing the new elements. See:

< 2 3 4 5 >

< 3 4 5 6 >

< 4 5 6 7 >

so on ...

  

In other words it would be a " roulette ". That's even in the form of a carousel "

I think it would be something like incrementar-e-decrementar in javascript

But how to implement this to source code ?

    
asked by anonymous 04.01.2017 / 16:31

1 answer

3

I made the appropriate adaptations in your logic, but it is possible to implement all this in a better way. If you want the pagination to change based on the option you selected, you must re-create it dynamically. 

var str = "ABCDEFGHIJKLMNOPQRSTUVXWYZ"

var link = [];
var contar = 0;

function makePagination() {

    link = [];

    for (var i = contar > 2 ? contar - 2 : 0; i < contar + (contar < 2 || contar == str.length ? 4 - contar : 2) && i < str.length; i++) {
        var letra = str.charCodeAt(i) - 64;

        if (i == contar) {
            link[i] = "<a href='base/dados/" + letra + ".html' target='resultado' class='hover'>" + (i + 1) + "</a>";
        } else {
            link[i] = "<a href='base/dados/" + letra + ".html' target='resultado' class=''>" + (i + 1) + "</a>";
        }

    }

    document.getElementById("listagem").innerHTML = link.join('');

}



makePagination();



function troca(i) {


    if (i == 'e') {
        if (contar > 0) {
            contar--;
        }
    } else {
        if (contar < link.length - 1) {
            contar++;
        }
    }
    makePagination();
}
a { 

 text-decoration: none;
 cursor: pointer;
 padding: 1px 4px 1px 4px; 
 color: black; 

 }

 a.hover { 

 color:red; 
   	 font-weight: bolder;
   	 background-color: red;
   	 color: white;

 }

 a:hover { 

 color:red; 
   	 font-weight: bolder;
   	 background-color: red;
   	 color: white;

 }

.seta {

  	cursor: pointer;

}
<div id="resultado"></div>

<button onclick="troca('e')" id="menos" class="seta">&#171</button>

<span id="listagem"></span>

<button onclick="troca('d')" id="mais" class="seta">&#187</button>

I also recommend using an odd number of pages, so the selected option can stay in the center, improving the look.

    
04.01.2017 / 17:39
Hosting Laravel 5.3 system in subdomain Database modeling, when it is possible to denormalize