JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<selecT class="quantidade" id="quantidadePorPaginas" onChange="carregarPagina(1)">
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="30">30</option>
</selecT>
<div id="butoins" class="botoes">
</div>

CSS

body{
  font-family: sans-serif;
}

.botoes ul{
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  transition: all 1s;
}

.botoes ul li a{
  margin: 2px;
  padding: 5px 10px;
  background-color: #efefef;
  display: block;
  border-radius: 3px;
  border: 1px solid lightgrey;
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  text-decoration: none;
  color: black;
  user-select:none;
  transition: all 1s;
}

.botoes ul li a:active{
  box-shadow: 0 0 0 black;
}

.botoes ul li a.disable{
  box-shadow: 0 0 0 black;
  border: none;
  color: #666;
}

.botoes ul li a.current{
  border: 1px solid blue;
  color: blue;
}

select.quantidade{
  padding: 5px 10px;
}

JavaScript

var qt_dados = 400;

function carregarPagina(pg){
	var pg = parseInt(pg);
  var qpp = document.querySelector("#quantidadePorPaginas").value;

  var qt = qt_dados/parseInt(qpp);
  
  var botoes = "<ul>";
  botoes += "<li>";
  if( (pg-1) == 0){
  	botoes += "<a href=\"#\" class=\"disable\"><<</a>";
  }else{
  	botoes += "<a href=\"#\" onClick=\"carregarPagina('" + (pg-1) + "')\"><<</a>";
  }
  botoes += "</li>";
  
  for(var i=1; i <= qt; i++){
    
     if(pg != 1){
     
       if( i == 1 || i > (qt - 1) ){
        botoes += "<li>";
        botoes += "<a href=\"#\" onClick=\"carregarPagina('" + i + "')\">" + i + "</a>";
        botoes += "</li>";
       }else{
       if(i == (pg-1)){
       botoes += "<li>";
          botoes += "<a class='disable'>...</a>";
          botoes += "</li>";
        }
       	if(i == pg || i == (pg-1) || i == (pg+1)){       
          botoes += "<li>";
          botoes += "<a href=\"#\" onClick=\"carregarPagina('" + i + "')\">" + i + "</a>";
          botoes += "</li>";
        }
        if(i == (pg+1)){
       		botoes += "<li>";
          botoes += "<a class='disable'>...</a>";
          botoes += "</li>";
        }
       }       
     }else{
     
       if( i <= 3 || i > (qt - 3) ){
        botoes += "<li>";
        botoes += "<a href=\"#\" onClick=\"carregarPagina('" + i + "')\">" + i + "</a>";
        botoes += "</li>";
       }
       if( i == 3 ){
          botoes += "<li>";
          botoes += "<a class='disable'>...</a>";
          botoes += "</li>";
    
       }
       
     }
  }
  botoes += "<li>";
   if( (pg) >= qt){
  	botoes += "<a href=\"#\" class=\"disable\">>></a>";
  }else{
  	botoes += "<a href=\"#\" onClick=\"carregarPagina('" + (pg+1) + "')\">>></a>";
  }
  botoes += "</li>";
  document.querySelector("#butoins").innerHTML = botoes;
  $("#butoins li a:contains('" + pg + "')").addClass("current");
}

carregarPagina(1);