How could you hide too many pagination numbers

Question

I have the source code already written. Check out 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 the need arose to show only the four first numbers of pagination, leaving it so:

< 1 2 3 4 >

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

< 2 3 4 5 >

< 3 4 5 6 >

< 4 5 6 7 >

so on and so forth ...

In other words it would be a "roulette". That’s right in the shape of a "carousel"

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

But how to implement this to source code?

Answer 1

I’ve made the appropriate adaptations to your logic, but it’s possible to implement all of this in a better way. If you want the paging to be changed as selected option, you must recreate 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 that the selected option can stay in the center, improving the look.