How to make a pagination that only shows Previous - 6 records - Next per page?

Asked

Viewed 35 times

-1

<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>

if(cont === 0){
    
    var qtdPagina = parseInt(v0.qtderegistros / 20);

    var c = 1;

    $('#paginacao').html("");
    for (var i = 1; i <= qtdPagina; i++) {
        $('#paginacao').append("<li class='page-item'><a class='page-link' href='#' onclick='pagina("+i+");'>"+i+"</a></li>");                            
    }
    
}
php javascript html5 bootstrap-4 paging

  • There are pages of mine that are loading more than 100 pages and I am not able to solve this problem...

  • A tip! I use this library on my websites: https://packagist.org/packages/coffeecode/paginator . It’s from the Upinside instructor, Robson, very easy to use. Take a look at the end of the page of one of my sites where I use the package: https://www.financecontrol.com.br/blog

  • It has a very simple way that I always use: https://www.youtube.com/watch?v=FOAJ2EQNtCk

1 answer

0


Using the Jquery you developed can do this way, would be the current page, and 3 more previous and 3 later pages:

var pagina = 5; //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("");

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

//loop em menos 3 até mais 3
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>");

You need to develop logic to check if it is the last page, penultimate etc. But there is a beginning.

Fidle of the example: https://jsfiddle.net/75ax9g8r/

  • 1

    Thanks too much friend, it worked after developing logic to check if it is the last page or the first not to appear -1.... : )

Browser other questions tagged php javascript html5 bootstrap-4 paging

You are not signed in. Login or sign up in order to post.