jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div id="paginadorMocado">
<nav aria-label="Page navigation example">
<ul class="pagination" id="paginacao">
<!--
    <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
    
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(1);">1</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(2);">2</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(3);">3</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(4);">4</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(5);">5</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(6);">6</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(7);">7</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(8);">8</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(9);">9</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(10);">10</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(11);">11</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(12);">12</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(13);">13</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(14);">14</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(15);">15</a></li>
    <li class="page-item"><a class="page-link" href="#" onclick="pagina(16);">16</a></li>                    
    <li class="page-item"><a class="page-link" href="#">Próx</a></li>
-->
</ul>
</nav>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

//if(cont === 0){
    var pagina = 9; //aqui você atribui a página atual, 5 é exemplo
    var qtdPagina = parseInt(500 / 20); // coloquei 500 a fim de exemplo, mantenha seu código

    var c = 1;
    var ant = pagina  - 1;


    $('#paginacao').html("");
    
    
		$('#paginacao').append("</li><li class='page-item'><a class='page-link' href='#' onclick='pagina("+ant+");'>Anterior</a></li>");

    for (var i = pagina  - 3; i <= pagina  + 3; i++) {
        $('#paginacao').append("<li class='page-item'><a class='page-link' href='#' onclick='pagina("+i+");'>"+i+"</a></li>");                            
    }
    
    var prox = pagina  + 1;
    
    $('#paginacao').append("</li><li class='page-item'><a class='page-link' href='#' onclick='pagina("+prox+");'>Próx</a></li>"); 
    
//}